Question

I have 2 drop-down menus (select1 and select2) and 1 input text (rate). When selecting a value in select1, it changes in select2. When I select a value in select2, the value appears in the input text. Now what I want is to change the input text to change when the select2 is changed by the select1 trigger. But that doesn’t work. I tried change, blur… but it didn’t help.

Any idea?

$('#select1').change( function() { 
    $.post("includes/functions.php", {select1: ""+$(this).val()+""},
      function(data){
        var objet = JSON.parse(data);       
        ...
        $("#select2").val(objet.select2value); //That works!
      }
}

and then:

$('#select2').bind('keyup blur change focus click', function(){
  $.post("includes/functions.php", {
    rate: ""+$(this).val()+"" }, function(data){
       var objet = JSON.parse(data);
       /* That works when I change select2 directly in the drop-down;
          not when select2 changed by changing select1 */
       document.form.rate.value = objet.rate;  
  });
});

Answer 1

How about refactoring the logic outside of the second handler, and invoking it on both events:

$('#select1').change( function() { 
    $.post("includes/functions.php", {select1: ""+$(this).val()+""},
      function(data){
        var objet = JSON.parse(data);       
        ...
        $("#select2").val(objet.select2value);
        updateRate();
      }
}

$('#select2').change( function(){
  updateRate();
});

function updateRate() {
    $.post("includes/functions.php", {
        rate: ""+ $('#select2').val() +"" }, function(data){
           var objet = JSON.parse(data);
           document.form.rate.value = objet.rate;  
      });
}