スレッド表示 | フラット表示〕 全トピック 923 件中 4 番目 次≫ ≪前

コンボボックスについて

created: 2007-01-04 14:49 | modified: 2016-04-01 01:56 | reply: 24

[3622] コンボボックスの連動

user: ゆうじ | created: 2007-02-23 00:20
2次元配列でなくてもかまいませんが
2次元配列にした方がスマートに書ける気がします。

挙げて頂いたコードは動きませんし
2次元配列をどのように処理したのかわかりませんので
なんともアドバイスしようがありませんせんが、
2つのコンボボックスを連動させるのに
私がイメージしてるのは以下のようなコードです。

<script type="text/javascript">
<!--
// コンボボックス2のオプションリストの初期化
var optlist = new Array();
optlist['none'] = new Array('--- select ---');
optlist['val1'] = new Array('選択1-1','選択1-2','選択1-3','選択1-4','選択1-5');
optlist['val2'] = new Array('選択2-1','選択2-2','選択2-3','選択2-4');
optlist['val3'] = new Array('選択3-1','選択3-2','選択3-3');

function setSelect2Options(val)
{
var selecter = document.form1.select2;
var list = optlist[val];

selecter.options.length = list.length;
for(i=0; i<list.length; i++){
selecter.options[i].value = list[i];
selecter.options[i].text = list[i];
}
selecter.options[0].selected=true;
}
//-->
</script>
<form name="form1" method="post">
コンボボックス1
<select onchange="setSelect2Options(value)" name="select1">
<option value="none" selected="selected">--- select ---</option>
<!-- Start of select1 options -->
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<!-- End of select1 options -->
</select>
<br>
コンボボックス2
<select name="select2">
<option value="none" selected="selected">--- select ---</option>
</select>
</form>


DBから得た値を反映させるには、このコードの
// コンボボックス2のオプションリストの初期化 のところと、
<!-- Start of select1 options --> から
<!-- End of select1 options --> までを
DBから得た値を元にPHPで整形すれば出来上がり、
こんなイメージを描いてます。


追記:こっちの方がJavascriptの汎用性が高くなっていいかも。
<script type="text/javascript">
<!--
// コンボボックス2のオプションリストの初期化
var optlist = new Array();
optlist['none'] = new Array('--- select ---');
optlist['val1'] = new Array('選択1-1','選択1-2','選択1-3','選択1-4','選択1-5');
optlist['val2'] = new Array('選択2-1','選択2-2','選択2-3','選択2-4');
optlist['val3'] = new Array('選択3-1','選択3-2','選択3-3');

// コンボボックスselecter のオプションをlistで初期化する関数
function setSelectOption ( selecter, list )
{
selecter.options.length = list.length;
for(i=0; i<list.length; i++){
selecter.options[i].value = list[i];
selecter.options[i].text = list[i];
}
selecter.options[0].selected = true;
}
//-->
</script>
<form name="form1" method="post">
コンボボックス1
<select onchange="setSelectOption(select2, optlist[value])" name="select1">
<option value="none" selected="selected">--- select ---</option>
<!-- Start of select1 options -->
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<!-- End of select1 options -->
</select>
<br>
コンボボックス2
<select name="select2">
<option value="none" selected="selected">--- select ---</option>
</select>
</form>
Parent: 3619  reply: 3627 4024 4422 返信 編集 削除
スレッド表示 | フラット表示〕 全トピック 923 件中 4 番目 次≫ ≪前
ページの一番上へ
Googleグックマークに登録 Yahooグックマークに登録 livedoorクリップに登録 @niftyクリップに登録 はてなブックマークに登録 deliciousに登録 Buzzurlに登録 FC2ブックマークに登録
最近更新された掲示板トピックス
管理人Blog
Yahoo Search

最近更新したNote
PHPマニュアル
今日のブックマーク
PHPマニュアル関数検索
関数名を入力し検索ボタンをクリック↑