- ベストアンサー
JavaScript連動セレクトボックスの問題と解決方法
- 現在、JavaScriptの勉強中です。三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。
- セレクトボックスの選択肢の数を100個程度、または無制限にする方法について教えてください。
- 現在のソースのロジックを解説していただけると助かります。
- juniper_se
- お礼率44% (11/25)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
selectedIndex（選択項目番号）の返す値を使って配列へアクセスし 配列要素に合わせoption要素を生成してますね。これ自体は単純なものですから データ構造だけ抑えておけば良いと思います。例えば select要素'sel0'で扱うdataは配列名をそのままに select要素'sel1'で扱う配列に一文字足して配列名をdataA...とましょう。 select要素'sel2'で扱う配列はdataB...とします。 配列名でグループ化し、これに合わせソースコードを以下に変更します。 onChange="SetList('sel2',dataA0);SetList('sel1', eval('dataA' + this.selectedIndex))" onChange="SetList('sel2', eval('dataB' + document.forms[0].sel0.selectedIndex + this.selectedIndex))" dataAのグループはdataの各要素に関連付けされます。 dataの要素数が5なら、dataA0～dataA4の5つが必要になります。 var data = new Array("都道府県は？", "東京都", "神奈川", "千葉", "hoge"); //要素を一つ追加 var dataA0 = new Array("---"); var dataA1 = new Array("区は？", "千代田区", "中央区", "品川区"); var dataA2 = new Array("市町村は？", "横浜市", "川崎市"); var dataA3 = new Array("市町村？", "千葉市", "市原市"); var dataA4 = new Array("市町村？", "hoge市", "piyo市", "fuga市"); //追加したdata[4]に対応 //dataBのグループはdataA0～dataA4それぞれの各要素に対応します。 var dataB10 = new Array("---"); var dataB11 = new Array("支店名は？", "千代田1号店", "千代田2号店", "千代田3号店"); var dataB12 = new Array("支店名は？", "中央区1号店", "中央区2号店", "中央区3号店", "中央区4号店", "中央区5号店"); var dataB13 = new Array("支店名は？", "品川1号店", "品川2号店"); var dataB20 = new Array("---"); var dataB21 = new Array("支店名は？", "横浜1号店", "横浜2号店", "横浜3号店", "横浜4号店"); var dataB22 = new Array("支店名は？", "川崎1号店", "川崎2号店", "川崎3号店"); var dataB30 = new Array("---"); var dataB31 = new Array("支店名は？", "千葉1号店", "千葉2号店"); var dataB32 = new Array("支店名は？", "市原1号店"); //dataA4の各要素に対応した配列集合 var dataB40 = new Array("---"); //dataA4[0]に対応 var dataB41 = new Array("支店名は？", "hoge1号店", "hoge2号店"); //dataA4[1]に対応 var dataB42 = new Array("支店名は？", "piyo1号店"); //dataA4[2]に対応 var dataB43 = new Array("支店名は？", "fuga1号店", "fuga2号店"); //dataA4[3]に対応 要素数100の配列data末尾要素に対応する配列はdataA99 配列dataA99の要素n個に対応する配列はdataB990～dataB99(n - 1)となります。
お礼
my-- 様 早速のご返答、有難うございました。 ご指導の通りに、ソースコードを改良し、 作動することも確認できました。 当初の目的が達成できました。 感謝いたします。 有難うございました。