jQueryAjax获得了一对完全相同的选择菜单，可以互相更新——一半工作！

我正在改进一个结账页面，有两个相同的“国家选择”菜单。一个在页面顶部用于计算邮资，另一个在底部用于输入投递地址。我们的客户似乎很难理解他们需要在两个菜单中选择同一个国家，否则价格计算将不正确

所以我要做的是改变一个菜单，更新它的对，反之亦然。目前，我更改的第一个菜单（菜单A）可以反复正常工作（影响菜单B），但一旦更改了菜单A，就不会选择更改为菜单B的菜单。反过来，如果先更改菜单B，则javascript不会拾取对菜单A的更改

选择适当的选项后，菜单将写回页面。我想知道是不是这种用ajax重写的方式阻止了菜单在jquery中的显示

这是完整的脚本（更新菜单…位是重要的函数，我想我会把剩下的函数留在脚本中，以防它们引起问题）

这是HTML

<div name="countryIsoTopBox" id="countryIsoTopBox">
<?
require("incViewbasketCountryChooser.php");
?>
</div>

...

<div id="shippingBoxes">
<?
require("incViewbasketShippingBoxes.php");
?>
</div>

...

下面是一个php生成的示例

<select name="countryIsoTop" id="countryIsoTop">
<option value="">Choose delivery country</option>
<option value="AF">Afghanistan</option>
.
.
.
</select>

选择送货国
阿富汗
.
.
.

及

选择送货国
阿富汗
.
.
.

好的，看起来最简单的方法是使用以下两种解决方案之一

将处理程序从change更改为live+单击选项元素

像这样改变它。提取函数，然后在更新select后重新绑定

解决方案1

改变这些

$("#countryIsoTop").change(function() {
$("#countryIsoShipping").change(function() {

到

请注意，现在函数中的

这个

是

选项

本身，不再是

选择

。因此，您可能需要调整一些代码

---

解决方案2

var topFn = function() {
    // UPDATE MENU IN SHIPPING OPTIONS
    ...
        success: function(response) {
            $('#shippingBoxes').html(response).find("#countryIsoShipping").change(shippingFn);
        }
    ...
}

var shippingFn = function() {
    // UPDATE MENU IN TOP COUNTRY BOX
    ...
        success: function(response) {
            $('#countryIsoTopBox').html(response).find("#countryIsoTop").change(topFn);
    }
    ...
});

$(document).ready(function() {
    $("#countryIsoTop").change(topFn);
    $("#countryIsoShipping").change(shippingFN);
}

---

我认为最好的选择是在两个选择上都设置处理程序，当一个选择发生更改时，更新另一个选择

 //ready
 var select1=$('#countryIsoTop'), select2=$('#countryIsoShipping');
 select1.change(function(){
   $('option[value='+$(this).val()+']', select2).attr({selected: 'selected'})
 });
 select2.change(function(){
   $('option[value='+$(this).val()+']', select1).attr({selected: 'selected'})
 });

---

您好，我已经按照您所说的做了，缩短了javascript并给出了输出/HTML/的响应。至于“为什么”——目前我只有一个计算邮费的菜单，当客户在页面的下方走得更远时，他们会抱怨他们不知道如何更改送货国。看起来很明显，他们可以再次更改顶部菜单，但我正试图通过链接这两个菜单，使所有客户都能尽可能轻松地使用它。

$("#countryIsoTop option").live("click", function() {
$("#countryIsoShipping option").live("change", function() {

var topFn = function() {
    // UPDATE MENU IN SHIPPING OPTIONS
    ...
        success: function(response) {
            $('#shippingBoxes').html(response).find("#countryIsoShipping").change(shippingFn);
        }
    ...
}

var shippingFn = function() {
    // UPDATE MENU IN TOP COUNTRY BOX
    ...
        success: function(response) {
            $('#countryIsoTopBox').html(response).find("#countryIsoTop").change(topFn);
    }
    ...
});

$(document).ready(function() {
    $("#countryIsoTop").change(topFn);
    $("#countryIsoShipping").change(shippingFN);
}

 //ready
 var select1=$('#countryIsoTop'), select2=$('#countryIsoShipping');
 select1.change(function(){
   $('option[value='+$(this).val()+']', select2).attr({selected: 'selected'})
 });
 select2.change(function(){
   $('option[value='+$(this).val()+']', select1).attr({selected: 'selected'})
 });