セレクトボックスの連動処理について

質問

PHPに投稿すべき内容かもしれませんが、
こちらに投稿します。以下URLを参考にセレクトボックスの
連動処理を実行させています。

やりたい事は以下になります。
・PHPにてフォーム(親-子のセレクトボックス)を記載し、
親-子を連動させる仕組を複数作成する為です。

http://www.skuare.net/test/jdependent.html

こちらのページに記載されている内容で、一つの関連付けされている
セレクトボックス(親-子-孫)については、連動処理する事が確認できましたが、
例えば以下のように関連付けされているセレクトボックスが2つある時に
2個目のセレクトボックスの選択や表示がされません。

<TABLE>
<select name="id" id="id" class="selectable">
<option value="">-- select --</option>
<option value="1" title="flowers" >Flowers</option>
<option value="2" title="animals" >Animals</option>
</select>

<select name="id2" id="id2" class="selectable">
<option value="">-- select --</option>
<option value="1" class="flowers" title="sunflower" >Sunflower</option>
<option value="2" class="flowers" title="rose" >Rose</option>
<option value="3" class="animals" title="dog" >Dog</option>
<option value="4" class="animals" title="cat" >Cat</option>
</select>
</TABLE>
<TABLE>
<select name="id" id="id" class="selectable">
<option value="">-- select --</option>
<option value="1" title="flowers" >Flowers</option>
<option value="2" title="animals" >Animals</option>
</select>

<select name="id2" id="id2" class="selectable">
<option value="">-- select --</option>
<option value="1" class="flowers" title="sunflower" >Sunflower</option>
<option value="2" class="flowers" title="rose" >Rose</option>
<option value="3" class="animals" title="dog" >Dog</option>
<option value="4" class="animals" title="cat" >Cat</option>
</select>
</TABLE>

おそらくスクリプト記載部分の
$(document).ready(function(){
$('#id2').dependent({
parent:'id',//親のid名
group: 'selectable'
});
});

#id2辺りを触る必要があるのだとは思うのですが、
同じ内容のセレクトボックスをPHPに複数記載した時に、
どのようにスクリプトを変更する必要があるかが解らず
非常に困っております。どなたか教えていただければ
幸いです。

※JavaScriptはまだ触り始めの為、初心者です。

回答No.2

DoubtOwl · ベストアンサー

可変であるならIDは指定できると思います。
固有のオブジェクトを示すものなので被らないようにしましょう。

現状ですと親のIDを固定名で指定しているので全ての子セレクトボックスにイベントをバインドしても
親が同じになってしまいます。

HTMLは変更できるけどjQueryの書き方がわからないという話であれば
下記でできると思います。

$(document).ready(function(){
//セレクトボックスのうち、idが_childで終わるものを取得
var children = $('select[id$="_child"]');

//各小セレクトボックスにイベントをバインド
for (var i = 0; i < children.length ; i++) {
$(children[0]).dependent({
//idから_childを除き、親のidを指定する。
parent:children[0].id.replace('_child', ''),//親のid名
group: 'selectable'
});
}

<select name="id1" id="id1" class="selectable">
<option value="">-- select --</option>
</select>
<select name="id1_child" id="id1_child" class="selectable">
<option value="">-- select --</option>
</select>
<select name="id2" id="id2" class="selectable">
<option value="">-- select --</option>
</select>
<select name="id2_child" id="id2_child" class="selectable">
<option value="">-- select --</option>
</select>

お礼

ご連絡遅れました。回答ありがとうございます。どうもjquery.dependent.js自体が複数行の連動に対応できていないようで、結局別スクリプトで実行する事にしましたが、上記回答は大変参考になりました。ありがとうございました。

回答No.1

y_free_temp

URL先のサンプルみたいなのを2つ作りたい、的なことでしょうか？

であれば

<select id="sel1"></select>
<select id="sel1_child1"></select>
<select id="sel2"></select>
<select id="sel2_child2"></select>

のようにid属性は被らないようにきちんと設定し

$(document).ready(function(){
$('#sel1_child1').dependent({
parent:'sel1',
group: 'selectable'
});
});
$(document).ready(function(){
$('#sel2_child2').dependent({
parent:'sel2',
group: 'selectable'
});
});

のようにJSも2つ書けばいいのではないでしょうか？

個人的にはJS初心者でJQueryから入るのはオススメしませんが・・・

補足

回答ありがとうございます。
やりたい事は、ほぼご指摘通りです。
ただ、2つと決まっている訳ではなく
可変なのです(と言っても最大で20個くらいですが)
その為、JSやSELECTの記載もよく解らなくなっている
のが現状です。

またおっしゃる通り素人がJQueryを触るべきではないと
私も思いますが、既存のコードがあり更にスケジュールが
キツキツの為に使用しています。本来はJavaScriptが
ガリガリ書けるようになってから使うべきと考えます。