検索機能の条件付きJQueryドロップダウン

Question

jQueryで検索機能を構築しています。私は、MySQLdatabaseからロードされる3つのドロップダウンを持っています。ユーザーがドロップダウンのうちの1つを選択すると、他のドロップダウン値に影響する必要があります。

私はそれを別々の値のために働かせましたが、2つまたは3つのドロップダウンを選択すると固まってしまいました。私は& &オペレータで働いていましたが、これは動作しません。誰かが間違っていることを見てみることができますか？

<script type="text/javascript"> 
    $(document).ready(function() { 
    if($(("#IndID").change) && $(("#CatID").change)) { 
    $("#ProdName").load("scriptp.php?c3=" + $("#IndID").val() + $("#CatID").val()); 
    } 

     if($(("#IndID").change) && $(("#ProdName").change)) { 
     $("#CatID").load("scriptc.php?c=" + $("#IndID").val() + $("#ProdName").val()); 
    } 

     $("#IndID").change(function() { 
     $("#CatID").load("scripti.php?c=" + $("#IndID").val()); 
     }); 

     $("#CatID").change(function() { 
      $("#ProdName").load("script.php?cc=" + $("#CatID").val()); 
     }); 

    }); 
</script> 

Answer 1

このような何か：

$(document).ready(function() { 

    // query already the elements you're going to use 
    var $ind = $("#IndID"), 
     $cat = $("#CatID"), 
     $prod = $("#ProdName"); 

    $ind.change(function(e) { 
     // populate the second select 
     if ($(this).val() === "") { 
      $cat.html(''); 
     } else { 
      $cat.load("scripti.php?c=" + $ind.val()); 
     } 
     // reset the third select 
     $prod.html(''); 
    }); 

    $cat.change(function(e) { 
     // populate the third select 
     if ($(this).val() === "") { 
      $prod.html(''); 
     } else { 
      $prod.load("scriptc.php?c=" + $ind.val() + $cat.val()); 
     } 
    }); 

}); 

注：DOMを照会することはない効率的なあるので、あなたの静的な要素一度照会し、代わりにで動作するようにjqueryのオブジェクトを使用することをお勧めしますすべての時間を再クエリします。

DEMO