Question

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

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.