Определить .change для двух полей выбора - Jquery

Question

Я не эксперт по jquery, поэтому мне нужна помощь по этому существующему коду.

Я хочу, чтобы моя jjery ajax-функция работала, когда # drop2 AND # drop2_1изменилось.В данный момент функция работает только при изменении # drop2 ИЛИ # drop2_1.: (*

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-код:

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>';

Другие решения, такие как обнаружение непустых значений, также приветствуются.

Answer 1

Селектор, который вы указали, не будет работать. Вы должны написать собственную логику, чтобы реализовать свою логику. Попробуйте это

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