Fill out select box depending on other two select boxes - jquery

Question

I had three drop down menus. Depending on items selected on two lists, the third list should be filled out (ajax post).

This is the html code:

Source Language:
<select name='source_lang' id='source_lang' $dis size='6'>
<option value='en'>EN</option>
<option value='sq'>SQ</option>
.....
</select>

Target Language:
<select name='targ_lang' id='targ_lang' $dis size='6'>
<option value='en'>EN</option>
<option value='sq'>SQ</option>
.....
</select>


Supplier:
<select name='supplier_id' id='supplier_id'>
<option value='1'>Supplier 1</option>
<option value='2'>Supplier 2</option>
</select>

On target and source language change, the supplier select list should be filled out.

Anybody can help me with the jquery? I need to ajax post the source, target language values and as response fill out the supplier select list with the data.

Answer 1

Is this something you're looking for?

$('#targ_lang, #source_lang').change(function(){
       $.ajax({
          url : '',
          method : 'post',
          type : 'json',
          data : {
            select1 : $('#targ_lang').val(),
            select2 : $('#source_lang').val()
          },
          complete : function(result){
            var options = $.parseJSON(result);
            $('#supplier_id').html("");
            for(i=0; i < options.length; i++) {
                $('#supplier_id').append(
                     '<option value="'+ options[i] + '">' + 'Supplier' + options[i] + '</option>'
                );
            }
          });
      });
});

On the PHP side you need to send your result like this:

$array = new Array(1,2,3,4); // supplier IDs
echo json_encode($array);

Answer 2

Example using jQuery's .post() method:

$('#targ_lang, #source_lang').change(function(){
   $.post("test.php", { source: $('#source_lang').val(), target: $('#targ_lang').val()},
     function(data) {
       //Change the data of the 3rd select
   });
});