JQuery AJAX получить пару идентичных меню выбора, чтобы обновить друг друга - наполовину работает!

Question

Я улучшаю страницу оформления заказа и имею 2 идентичных меню выбора страны. Один вверху страницы для расчета почтовых расходов и один внизу для ввода адреса доставки. Похоже, нашим клиентам трудно понять, что им нужно выбрать одну и ту же страну в обоих меню, иначе расчет цены будет неправильным.

Итак, я пытаюсь внести изменения в одном меню, обновить его пару и наоборот. В настоящий момент первое меню (меню A), которое я изменяю, работает нормально несколько раз (влияет на меню B), но после того, как меню A было изменено, измененное на меню B не было выбрано. То же самое в обратном порядке, если меню B изменяется первым, изменения в меню A не воспринимаются JavaScript.

Меню записываются обратно на страницу с выбранной соответствующей опцией. Мне было интересно, не перезаписывает ли это меню с помощью ajax меню в jquery.

Вот полный сценарий (МЕНЮ ОБНОВЛЕНИЯ ... биты - это важные функции, просто я думал, что оставлю остальные функции в сценарии на случай, если они вызовут проблему)

// wait for the DOM to be loaded 
$(document).ready(function() {

    // see if countryIsoTop menu has changed
    $("#countryIsoTop").change(function() {

        // UPDATE MENU IN SHIPPING OPTIONS
        $.ajax({
        type: "POST",
        url: "incViewbasketShippingBoxes.php", 
        data: $("#checkoutform").serialize(),
        success: function(response) {
            $('#shippingBoxes').html(response);
        }
        });
    // prevent actual form submission
    return false;
  }); 





    // see if countryIsoShipping menu has changed
    $("#countryIsoShipping").change(function() {


        // UPDATE MENU IN TOP COUNTRY BOX
        var data = 'countryIsoShipping=' + $("#countryIsoShipping").val();  
        $.ajax({
        type: "POST",
        url: "incViewbasketCountryChooser.php", 
        data: data,
        success: function(response) {
            $('#countryIsoTopBox').html(response);
        }
        });
    // prevent actual form submission
    return false;
  });   

});

Вот 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>

и

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

Answer 1

Я думаю, что вам лучше всего установить обработчики на оба выбора, когда один из них будет изменен, обновите другой

 //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'})
 });

Answer 2

Хорошо, похоже, проще всего было бы использовать одно из следующих двух решений

1. изменить обработчик с изменения на живой + щелкнуть по элементам опции
2. измени это так. Извлечь функции, а затем выполнить повторную привязку после обновления выбора

Раствор 1

Измените эти

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

до

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

Обратите внимание, что теперь this внутри функции - это option, а не select. Таким образом, вам, возможно, придется скорректировать некоторый код.

---

Решение 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);
}