naka_aki_splかも

2013-02-14

jquery.dependent.jsで「複数の親にヒットする子」を作る

http://www.skuare.net/2009/12/selectjavascriptdependent_sele.html 複数のselect要素を連動させるJavaScript「Dependent Select」|skuare.net]
http://d.hatena.ne.jp/naaaaari/20120610/1339325733 jquery.dependent.jsを修正した - Diary::Naaaaari]

とかでいうdependentプラグインですが、
親:子が完全に1:Nのときしかサポートしてないのね、これ。

親(title属性で特定する)に対応する子を
せっかくclass属性で指定できるようになってんだから、
class属性でよく有るように
スペース区切りで複数指定できたらいいなーと
思うんだ。

<select name="parent" id="parent" class="selectable">
	<option title="1" value="1">1</option>
	<option title="2" value="2">2</option>
	<option title="3" value="3">3</option>
</select>
<br/>
<select name="child" id="child" class="selectable">
	<option class="1 2 3" value="1">1</option>
	<option class="1" value="11">11</option>
	<option class="2 3" value="2">2</option>
	<option class="2" value="22">22</option>
	<option class="3" value="3">3</option>
	<option class="3" value="33">33</option>
</select>

でも標準(てのか)のままだと出来ないっぽ。

で。

@@ -130,12 +130,13 @@
 			
 			$title = $(this).find('option:selected').attr('title');
 			// add options to the child mask from the holder
-			$($holder_cls+$child_cls).find('option[class='+$title+']').each(function(){
+			$($holder_cls+$child_cls).find('option').filter("."+$title).each(function(){

とか改変してみたら、期待どおりになったぽい!

class属性値を文字列的に完全一致で見るんじゃなく、
「.hoge」みたいな書き方でヨロシクやってもらうかんじ。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

トラックバック - http://d.hatena.ne.jp/naka_aki_spl/20130214/1360837539