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

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(){ 
    $.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); 
    }); 

Answer 3

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

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

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