複数のdivをdropboxの値で更新すると、1つのdropboxが動作し、1は

Question

となります。タブレットとデスクトップのビューは同じページですがdiv要素を表示/非表示するためレイアウトが異なります。

説明が難しいので、コードをjsfiddleにコピーしました。 https://jsfiddle.net/4wsqpjrn/

私はdivを更新するために両方のドロップダウンボックスを取得しようとしていますが、何が欠けていますか？

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コードは、タブレット用に1回、デスクトップ用に1回、インクルードファイルから2回プルされます。

<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(); 

この問題は現在解決されるはずです。