Jquery 使用dropbox值更新多个div，1个dropbox工作，1个不工作

我们的网站响应迅速，因此平板电脑和桌面视图是相同的页面，但由于显示/隐藏div元素，布局不同

很难解释，所以我将代码复制到了JSFIDLE中。

我正在尝试让两个下拉框更新div，我遗漏了什么？

我复制了这些字段，因此它在页面中的呈现方式是一样的，当从平板电脑上查看时，2个桌面分区是隐藏的，从桌面上看，2个平板电脑分区是隐藏的

tablet 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

tablet端工作正常，它更改tablet和desktop div中的值，但desktop下拉框根本不工作

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>

是英镑；479
&磅；
349

您的两个选择共享相同的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();

---

这将暂时解决此问题。

您好，感谢您的帮助，我已根据您的建议更新了FIDLE，并在jquery中添加了额外的行，但它仍然不起作用？我更新了我的答案，它在你的小提琴里起作用。希望就是这样。