Question

I’m not a jquery expert, so I need some help here on this existing code.

I want my jquery ajax function to work when #drop2 AND #drop2_1 have been changed.
Right now the function only works when #drop2 OR #drop2_1 are changed. 🙁

Jquery:

$('#wait_2').hide();
$('#drop_2 && #drop_2-1').change(function(){
  $('#wait_2').show();
  $('#result_2').hide();
  $.get(\"func.php\", {
    func: \"drop_2\",
    drop_var: $('#drop_2').val()
  }, function(response){
    $('#result_2').fadeOut();
    setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
  });
    return false;
});

PHP code:

if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
   drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{
    include_once('db.php');
    $result = mysql_query("SELECT DISTINCT tier_two FROM Producten_verkoop WHERE tier_one='$drop_var'");
    $result2 = mysql_query("SELECT DISTINCT tier_three FROM Producten_verkoop WHERE tier_one='$drop_var'")

    or die(mysql_error());

    echo '<select name="drop_2" id="drop_2">
          <option value=" " disabled="disabled" selected="selected">Choose one</option>';

           while($drop_2 = mysql_fetch_array( $result ))
            {
              echo '<option value="'.$drop_2['tier_two'].'">'.$drop_2['tier_two'].'</option>';
            }

    echo '</select>';


            echo '<select name="drop_2-1" id="drop_2-1">
          <option value=" " disabled="disabled" selected="selected">Choose one</option>';

           while($drop_2 = mysql_fetch_array( $result2 ))
            {
              echo '<option value="'.$drop_2['tier_three'].'">'.$drop_2['tier_three'].'</option>';
            }

    echo '</select>';

Other solutions, like detecting non-empty values are also welcome.

Answer 1

The selector which you provided is not going to work. You have to write a custom logic to implement your logic. Try this

function getFunc(){

  //Reset the dropdownChanged values
  dropDown2_1Changed = false;
  dropDown2Changed = false;

  $('#wait_2').show();
  $('#result_2').hide();
  $.get("func.php", {
      func: "drop_2",
      drop_var: $('#drop_2').val()
    }, 
    function(response){
      $('#result_2').fadeOut();
      setTimeout(function(){
        finishAjax_tier_three('result_2', escape(response));
      }, 400);
  });
}

var dropDown2Changed = false; dropDown2_1Changed = false;

$('#drop_2').change(function(){
   dropDown2Changed = true;
   if(dropDown2_1Changed){
      getFunc();
   }
});

$('#drop_2-1').change(function(){
   dropDown2_1Changed = true;
   if(dropDown2Changed){
      getFunc();
   }
});