Question

我使用以下代码运行以下2个从属下拉列表。它的工作正常。现在我想再添加2个字段，即Block和Hospital，所有字段都应该同时依赖于District的选择。即如果我改变区，则应同时过滤细分，区块和医院的选项。我该如何更改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);
});
});





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> 

 //---------------------------------------------------

  Block: <select name="block" id="subcat1"   required><option></option>
 <option rel="North" value="a">a</option>
 <option rel="North" value="b">b</option>
 <option rel="North" value="c">c</option>
 <option  rel="Unakoti" value="d">d</option>
   <option  rel="Unakoti" value="e" >e</option>
 </select> 


 Hospital: <select name="hosp" id="subcat2"   required><option></option>
 <option rel="North" value="a1">a1</option>
 <option rel="North" value="b1">b1</option>
 <option rel="North" value="c1">c1</option>
 <option  rel="Unakoti" value="d1">d1</option>
   <option  rel="Unakoti" value="e1" >e1</option>
 </select>

Answer 1

这是你想要的吗？我修改了你的逻辑。只需使用css代替attr

$(function(){

var $cat = $("#cat"),
    $subcat = $("#subcat");     
    $subcat1 = $("#subcat1");
    $subcat2 = $("#subcat2");
$cat.on("change",function(){
    var _rel = $(this).val();
    $subcat1.val('');
    $subcat2.val('');
    $subcat.val('');
    
    $subcat.find("option").css("display","none");
    $subcat.find("[rel="+_rel+"]").show();
    $subcat1.find("option").css("display","none");
    $subcat1.find("[rel="+_rel+"]").show();
    $subcat2.find("option").css("display","none");
    $subcat2.find("[rel="+_rel+"]").show();
   
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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> 

  Block: <select name="block" id="subcat1"   required><option></option>
 <option rel="North" value="a">a</option>
 <option rel="North" value="b">b</option>
 <option rel="North" value="c">c</option>
 <option  rel="Unakoti" value="d">d</option>
   <option  rel="Unakoti" value="e" >e</option>
 </select> 


 Hospital: <select name="hosp" id="subcat2"   required><option></option>
 <option rel="North" value="a1">a1</option>
 <option rel="North" value="b1">b1</option>
 <option rel="North" value="c1">c1</option>
 <option  rel="Unakoti" value="d1">d1</option>
   <option  rel="Unakoti" value="e1" >e1</option>
 </select>

Jquery函数可以进行多个依赖的下拉列表

1 个答案: