Снимите флажок Выбрать параметры при выборе одного поля при использовании нескольких форм на одной странице

Question

У меня есть ситуация, когда вторая опция списка выбора генерируется из первой опции списка выбора. Например, когда мы выбираем страну, соответствующие состояния генерируются в следующем списке выбора.

В моем случае у меня есть несколько форм на одной странице, которые одинаковы. Может кто-нибудь дать мне знать, как реализовать его в нескольких формах.

Я попробовал следующий код, но он не работал

        $(".country").change(function(){
       $.get("sample.php?val=" + $(this).val(),
        function(data){
            $(this).parent().next().children('.state').children('option').remove();
            $(this).parent().next().children('.state').append(data);
        });

Жду вашей поддержки, спасибо заранее

Answer 1

Предполагая, что все "несколько форм" содержат <select class='country'> и <select class='state'>, содержащиеся внутри одного и того же элемента <form>, вы можете использовать .closest() и .find() для перемещения и не будьте так привязаны к точному позиционированию DOM:

$('.country').change(function() { 
  var $stateSelect = $(this).closest('form').find('select.state');

  $.get('sample.php?val='+$(this).val(), function(data) {
    $stateSelect.empty().append(data);
  });
});

Кроме того, ваш $(this), который вы использовали внутри обратного вызова, вероятно, не работает должным образом. Эта функция обратного вызова вызывается с this в качестве объекта параметров AJAX для jQuery. Вы можете использовать функцию scoping для сохранения var $this = $(this); в функции события (как я сохранил $stateSelect), если вам нужно сохранить его для использования внутри других ваших обратных вызовов / замыканий внутри функции события.

Answer 2

Предполагая, что ваши отношения между элементами правильные, это должно работать, немного более кратко:

$('.country').change(function() { 
  var sel = $(this).parent().next().children('.state');
  $.get('sample.php?val='+$(this).val(), function(data) {
    sel.html(data);
  });
});

Проблема в том, что this не относится к тому, что, по вашему мнению, оно делает, когда $.get возвращается, поскольку оно асинхронное, нужно хранить эту ссылку и использовать ее при возврате.

Answer 3

    $(".country").change(function(){
   $.get("sample.php?val=" + $(this).val(),
    function(data){
        // console.log($this);
        $(this).parent().next().children('.state').children('option').remove();
        $(this).parent().next().children('.state').append(data);
    });

Я не уверен на 100%, но вы можете неправильно понять this в function(data). Попробуйте запустить console.log($this); в строке, которую я закомментировал.

Работает ли следующее? this - это неприятная концепция в JavaScript, но она мощная и заслуживает изучения.

    $(".country").change(function(){
     var country = $(this);
   $.get("sample.php?val=" + $(this).val(),
    function(data){
        country.parent().next().children('.state').children('option').remove();
        country.parent().next().children('.state').append(data);
    });