更新多個div與Dropbox的價值，1 Dropbox的工作，1不是

Question

我們的網站是響應，所以平板電腦和桌面視圖是相同的頁面，但由於顯示/隱藏div元素只是一個不同的佈局。

很難解釋，所以我把代碼複製到jsfiddle中。 https://jsfiddle.net/4wsqpjrn/

我試圖讓兩個下拉框更新divs，我即時失蹤？

ive複製了字段，以便在從平板電腦上查看時，如何從頁面中呈現2個桌面div，從桌面隱藏2個平板div。

平板電腦div首先在桌面後面的頁面中呈現。

jQuery的是在頁面

jQuery('#product-options').change(function (event) { 
jQuery('.product-price').html(jQuery('#product-options option:selected').attr('data-price')); 
jQuery('.aep').html(jQuery('#product-options option:selected').attr('data-aep')); 
}).change(); //to iniitize the value on load 

平板側做工精細，它的變化值在兩個平板電腦和臺式機的div但是桌面下拉框不會在所有的工作在底部？

html代碼從包含文件中拉出兩次，一次用於平板電腦，一次用於桌面。

<div style="padding-bottom:3px"> 
<div class="inline"><font class="was_style"> 
<b>Was &pound;</b></font></div><div class="inline"><div class="aep aep_style">479</div></div> 


<div style="padding-bottom:5px"> 
<div class="inline"><font class="product_price now_style">&pound;</font>  
</div><font class="product_price now_style"><div class="product-price inline" itemprop="price">349</div></font></div> 
<div></div> 
</div> 

Answer 1

您的兩項選擇都共享相同的ID。 將它們重命名爲：product-options-desktop和product-options-tablet並使用下面的代碼。

jQuery('#product-options-desktop').change(function (event) { 
jQuery('.product-price').html(jQuery('#product-options-desktop option:selected').attr('data-price')); 
jQuery('.aep').html(jQuery('#product-options-desktop option:selected').attr('data-aep')); 
    }).change(); //to iniitize the value on load 

jQuery('#product-options-tablet').change(function (event) { 
jQuery('.product-price').html(jQuery('#product-options-tablet option:selected').attr('data-price')); 
jQuery('.aep').html(jQuery('#product-options-tablet option:selected').attr('data-aep')); 
    }).change(); 

現在應該解決這個問題。