Question

我使用以下代码运行两个不同的依赖下拉列表。细分取决于区域和着装取决于性别。它不起作用。问题出在哪儿？我们可以使用这样的两个功能吗？

$(function(){
var $cat = $("#cat"),
    $subcat = $("#subcat");  

$cat.on("change",function(){
    var _rel = $(this).val();
    $subcat.find("option").attr("style","");
    $subcat.val("");
    if(!_rel) return $subcat.prop("disabled",true);
    $subcat.find("[rel="+_rel+"]").show();
    $subcat.prop("disabled",false);
  });

 var $cat1 = $("#cat1"),
    $subcat1 = $("#subcat1");  

$cat1.on("change",function(){
    var _rel = $(this).val();
    $subcat1.find("option").attr("style","");
    $subcat1.val("");
    if(!_rel) return $subcat1.prop("disabled",true);
    $subcat1.find("[rel="+_rel+"]").show();
    $subcat1.prop("disabled",false);
}); 

 });


District: <select name="dis"  id="cat" required><option></option><option 
>North </option><option >Unakoti</option></select> 

Subdivision: <select name="subd" id="subcat"   required><option></option>
<option rel="North" value="Dharmanagar">Dharmanagar</option>
 <option rel="North" value="Panisagar">Panisagar</option>
<option rel="North" value="Kanchanpur">Kanchanpur</option>

<option  rel="Unakoti" value="Kailasahar">Kailasahar</option>
<option  rel="Unakoti" value="Kumarghat" >Kumarghat</option></select> 


Gender: <select name="gen"  id="cat1" required><option></option><option >M 
</option><option >F</option></select> 

Dress: <select name="dre" id="subcat1"   required><option></option>
<option rel="M" value="D1">D1</option>
<option rel="M" value="D2">D2</option>
<option rel="M" value="D3">D3</option>

<option  rel="F" value="D4">D4</option>
<option  rel="F" value="D5" >D5</option>

</select>

Answer 1

首先，必须拥有多个ready（）函数并不是一个好习惯。您可以删除第二个$（function（）{}）并在该函数的第一个实例中添加所有代码。这是一个将在DOM元素加载后使用的函数，您可以在其中放入尽可能多的代码。无需再次定义它。另外，如果要设置$ subcat.prop（“disabled”，true），则无需添加返回。您可以使用if（！_ rel）$ subcat.prop（“disabled”，true）;

使用jquery进行多次依赖下拉列表

1 个答案: