2017-06-11 23 views
0

次の2つの依存ドロップダウンリストを実行するために、次のコードを使用しました。そのうまく動作します。今ではブロックと病院の2つのフィールドを追加したいと思いますが、すべてが同時に地区の選択に依存する必要があります。つまり私が地区を変更する場合、サブディビジョン、ブロック、病院のオプションを同時にフィルタリングする必要があります。 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); 
}); 
}); 





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> 
+0

cssを使うのか? –

+0

地区でのみ細分化が変更されています。サブディビジョン、ブロック、病院が3つすべて地区で変更される必要があります。 –

+0

私はあなたの質問に答えましたあなたが望んでいることを確認してください? –

答えて

1

これはあなたが欲しかったのですか?私はあなたのロジックを変更しました。ちょうどあなたが今直面している問題が何であるかを代わりに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>

+0

ありがとうございます。もう一つの問題があります。私はGender(id = cat7、optionsはM、Fと言う)とDress(id = subcat7、Mは3,4、Fは4、options sat 1,2)と言うフィールドを2つ追加したい。彼らは以前のフィールドとは完全に独立しています。ドレスはジェンダーのみに依存します。しかし、私は同じページでそれらを使用したいと思います。どのように機能を変更するか、または別の機能を使用する必要があります。 –

+0

ジェンダーの変更リスナーを1つ書き、ジェンダーに基づいてドレスを変更します。ロジックは上記と同じです –

+0

問題が解決しました。それは愚かな間違いだった –

関連する問題