Mars Diary このページをアンテナに追加 RSSフィード

2007年11月09日(Fri) [javascript]連動プルダウン(select) このエントリーを含むブックマーク

選択子を絞りこむ為に多段連動するドロップダウンリストJavascript

サンプル

ポイントは…

optgroupでグルーピングしておくこと。


使い方

ライブラリConnectedSelect.js)の読み込み

<script type="text/javascript" src="ConnectedSelect.js"></script>

連動するselectidを付ける。

親にあたるoptionのvalueと

子にあたるoptgroupのlabelを対応させておく。

<select id="SEL1">
	<option value="XXX">XXX</option>
	<option value="YYY">YYY</option>
</select>
<select id="SEL2">
  <optgroup label="XXX">
	<option value="x1">x1</option>
	<option value="x2">x2</option>
  </optgroup>
  <optgroup label="YYY">
	<option value="y1">y1</option>
	<option value="y2">y2</option>
  </optgroup>
</select>
以下略

連動させるselectを初期化する。

<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3']);
</script>

Q321Q321 2007/12/28 16:11 終了タグ</option>を使用しないとIEではエラーになりますが、なぜでしょうか?

MarsMars 2007/12/28 18:15 試してみましたが、</option>なくても問題なく動作しました。
エラーの内容・詳細がわかれば、推測はできるかも。

VittelVittel 2008/05/20 13:17 このプルダウンを3階層にしてフォームのページを作りたいのですが、3段階目に繋げる2段階目のoption valueは全て同じにしたいのですが、
このような感じです
<select id=”SEL1”>
<optgroup label=”choise”>
<option value=”fruit”>フルーツ</option>
<option value=”vegetable”>野菜</option>
</select>
<select id=”SEL2”>
<optgroup label=”fruits”>
<option value=”x1”>みかん</option>
<option value=”x1”>りんご</option>
<option value=”x1”>メロン</option>
</optgroup>
<optgroup label=”vegetable”>
<option value=”x1”>キャベツ</option>
<option value=”x1”>きゅうり</option>
<option value=”x1”>トマト</option>
</optgroup>
</select>
<select id=”SEL3”>
<optgroup label=”x1”>
<option>1個</option>
<option>2個</option>
<option>3個</option>
<option>4個</option>
<option>5個</option>
<option>6個</option>
</optgroup>
</select>


そうすると、フォームで送信した結果が select id のところで全てが ”x1”になってしまい
各商品の名前を出すことができません。

何か方法があれば教えてください。

MarsMars 2008/05/20 15:12 いい方法は思い浮かびません。
ドリルダウンしか想定してないので例のような構造には適さないです。

MarsMars 2008/05/20 15:22 なお、例でいえばSEL3(個数)は連動させる意味が見えないです。
(普通に考えるなら別のinputとかにするでしょう。)
ヨソ様で質問するにしても、もう少し具体的な例を挙げて質問したほうがいいと思いますよ。

luralura 2008/09/19 13:48 初めまして。
このエントリーの例ですと、SEL1(親) -> SEL2(子) -> SEL3(孫)という関係ですが、これを、SEL1(親) -> SEL2(子)・SEL3(子)という使い方はできますでしょうか?
つまり、SEL1が変更された場合にSEL2とSEL3を同時に変更させ、SEL2やSEL3が変更された場合は何も処理しないということです。

現在掲載されているjavascriptを流用しようと頑張ってみたところ、同時に変更させるまでは上手くいったのですが、その後SEL2を変更するとSEL3も変更されてしまいます。

説明が下手で申し訳ないのですが、良い知恵を拝借願います。

MarsMars 2008/09/19 15:15 どうも始めましてです。
いきなりガッカリさせて申し訳ないですが、
簡単に連動が組み込めるようにしてある造りが災いして、
そういった形態に対応させる改造の母体として向いていないです。
(いや、改造を試みたんだけど、ほぼ作り直しになるのが見えてきてココロが折れました。)

多段連動に対応したスクリプトじゃなくて、単純な2連動のサンプルを探して改造したほうが楽だと思います。

luralura 2008/09/24 09:15 >Marsさん
ご回答ありがとうございました。
お手数をおかけして、申し訳ありません。

ただ、optgroupを利用した連動スクリプトのサンプルがなかなかないようです…というか、Marsさんのサイト以外は発見できませんでした(汗)

kamakama 2009/03/09 13:31 はじめまして。
突然のコメ失礼します;
連動するプルダウンの作成方法で色々検索した結果、
こちらにたどり着きました。
5断層の絞込みプルダウンをやろうと試みたのですが、
4段目以降が中々反映せず。。。。
ご教授願いたいです。

NishinakajimaNishinakajima 2009/03/20 19:26 プルダウンに初期値を設定した場合、画面表示時とリセットボタンを押した場合、2段目以降が反映されません。
なので対応するようスクリプトを追加してみました。

(1)ConnectedSelect.jsの4行目の次でデフォルト値を簡単に格納しておく。

var obj = document.getElementById(selIdList[i]);
obj.ConnectedSelectDefault = obj.options[obj.selectedIndex].value; //追加
if(i){

(2)ConnectedSelect.jsに関数を1つ追加

function ConnectedSelectDefault(selIdList){
for(var i=0;selIdList[i];i++) {
if(i){
var obj = document.getElementById(selIdList[i]);
obj.disabled = true;
var oSel = document.getElementById(selIdList[i-1])
var oVal = oSel.ConnectedSelectDefault;
for(var OG=obj.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) {
if(OG.label != oVal) { continue; }
for(var OP=OG.firstChild;OP;OP=OP.nextSibling)
obj.appendChild(OP.cloneNode(true));
obj.disabled = false;
break;
}
}
}
}

(3)プルダウンが初期化される直前に(2)を実行する。

・画面表示時
<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3']);
ConnectedSelectDefault(['SEL1','SEL2','SEL3']); //追加
</script>

・リセットボタン
<input type="reset" value="リセット" onClick="ConnectedSelectDefault(['SEL1','SEL2','SEL3']);">

以上です。
['SEL1','SEL2','SEL3']の部分は複数使うので、実際は変数で指定してしまった方がよいです。