使用jquery的多個依賴下拉列表

我已經使用下面的代碼來運行兩個不同的依賴下拉列表。細分取決於區和衣服取決於性別。它不工作。哪裏有問題？我們可以使用這樣的兩個功能嗎？使用jquery的多個依賴下拉列表

$(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>

來源

2017-06-11 Asim Das

首先，擁有多個ready（）函數並不是一個好習慣。您可以刪除第二個$（function（）{}）並在該函數的第一個實例中添加所有代碼。這是一個將在DOM元素加載後使用的函數，您可以根據需要放置儘可能多的代碼。沒有必要再次定義它。另外，如果你想設置$ subcat.prop（「disabled」，true），則不需要添加返回。你可以使用if（！_ rel）$ subcat.prop（「disabled」，true）;

來源

2017-06-11 13:29:03 Kaloyan

我編輯了我的代碼。但仍然不起作用 –

問題解決了，這是一個愚蠢的錯誤。 –

使用jquery的多個依賴下拉列表

回答

相關問題