Clear Select options when selecting one field while using multiple forms on same page

Question

Hi all,

I have a situation where the second select list option is generated from the first select list selected option. Like when we select Country corresponding states are generated in next select list.

In my case I am having multiple forms on single page which are same. Can anyone let me know how to implement it on multiple forms.

I tried the following code but it didn't work

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

Waiting for your support thanks in advance

Answer 1

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

I'm not 100% sure, but you might be misunderstanding this in the function(data). Try running console.log($this); in the line I commented out.

Does the following work? this is a nasty concept in JavaScript, but it's powerful and worth learning.

    $(".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 2

Assuming the "multiple forms" all have <select class='country'> and <select class='state'> contained inside the same <form> element you can use .closest() and .find() to traverse and not be so tied to exact DOM positioning:

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

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

Also, your $(this) that you were using inside of the callback probably doesn't work properly. That callback function gets called with this as an AJAX options object for jQuery. You can use function scoping to save var $this = $(this); in the event function (like I saved $stateSelect) if you need to keep it around for use inside your other callbacks/closures inside of the event function.

Answer 3

Assuming your relationship between elements is right, this should work, a bit more terse:

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

The issue is that this doesn't refer to what you think it does when the $.get comes back, since it's asynchronous, need to store that reference and use it when it returns.