#author("2020-08-14T14:08:18+09:00","","") #author("2022-04-28T14:41:00+09:00","","") *select選択ボックスを動的に作る [#eefddbab] JavaScriptで、こんな感じの、選択肢が動的に変わる選択ボックス作るサンプルです。 #htmlinsert(:HTML/動的選択ボックス) -最初に選んだ選択ボックスによって、次の選択ボックスの選択肢が変わります。 ''解説'' -フォームの<select>+<option>タグで作った選択ボックスは、~ Selectオブジェクトという種類のオブジェクトになります。~ Selectオブジェクトは、optionsという選択肢の配列を持っています。~ これにアクセスすることで、動的に選択肢の内容を変えることができます。~ -selectオブジェクト(選択ボックス)を取得するには、~ タグで<select name="選択ボックス名" 〜で名前をちゃんとつけて、~ <form name="フォーム名" で名前をちゃんとつけて、~ フォーム名.elements["選択ボックス名"] または フォーム名.選択ボックス名 で取得できます。 -選択肢が選択されたときのイベントは、onChangeです。 -optionsの要素は、.valueと.textというプロパティを持ちます。~ .valueは、<option>タグのvalue=のことで、~ .textは、選択肢として表示されるテキストのことです。 ''コード''~ #code(JavaScript){{ <html> <title>JavaScript:動的選択ボックス作成サンプル</title> <head> </head> <body> 動的選択ボックス作成サンプル : 商品編 <br> <form name="form1" method="get" action="http://f29.aaa.livedoor.jp/~morg/wiki/sample/disp_send.php" onsubmit="gettext(this)"> <!-- set name and onChange --> <select name="sel_bunruiA" onChange="selectBunruiA(this)"> <option value="">(種類)</option> </select> <select name="sel_bunruiB" width="100px"><option value="">(品名)</option></select> <input type="submit" value="検索"></input> <input type="hidden" name="search" value=""></input> </form> <script type="text/javascript" language="JavaScript"> <!-- // 最初の分類リスト (分類Aリスト)を定義 var bunruiA = new Array("野菜","果物","肉","魚"); // 次の分類(分類Aごとの分類Bリスト)を定義 var bunruiB = new Array(); bunruiB["野菜"]= new Array("じゃがいも","にんじん","ピーマン"); bunruiB["果物"]= new Array("スイカ(1/4)","オレンジ","いちご"); bunruiB["肉"] = new Array("豚肉(100g)","牛肉(100g)","羊肉(100g)"); bunruiB["魚"] = new Array("サンマ(1尾)","アジ(1尾)","しらす(小パック)"); // 分類Aの選択リストを作成 createSelection( form1.elements['sel_bunruiA'], "(種類)", bunruiA, bunruiA); //////////////////////////////////////////////////// // // 選択ボックスに選択肢を追加する関数 // 引数: ( selectオブジェクト, value値, text値) function addSelOption( selObj, myValue, myText ) { selObj.length++; selObj.options[ selObj.length - 1].value = myValue ; selObj.options[ selObj.length - 1].text = myText; } ///////////////////////////////////////////////////// // // 選択リストを作る関数 // 引数: ( selectオブジェクト, 見出し, value値配列 , text値配列 ) // function createSelection( selObj, midashi, aryValue, aryText ) { selObj.length = 0; addSelOption( selObj, midashi, midashi); // 初期化 for( var i=0; i < aryValue.length; i++) { addSelOption ( selObj , aryValue[i], aryText[i]); } } /////////////////////////////////////////////////// // // 分類Aが選択されたときに呼び出される関数 // function selectBunruiA(obj) { // 選択肢を動的に生成 createSelection(form1.elements['sel_bunruiB'], "(品名)", bunruiB[obj.value], bunruiB[obj.value]); } ///////////////////////////////////////////////// // submit前の処理 function gettext(form){ var a = form1.sel_bunruiA.value; // 分類1 var b = form1.sel_bunruiB.value; // 分類2 // ANDでつなげる form1.elements['search'].value = a+' AND '+b; alert(form1.elements['search'].value ); } //--> </script> }} **質問・コメント [#a8079424] - sd -- [[szdx]] &new{2012-10-15 (月) 15:25:47}; - あ -- [[あ]] &new{2012-11-30 (金) 13:55:35}; - d -- [[dd]] &new{2012-11-30 (金) 13:55:53}; - d -- [[dd]] &new{2012-11-30 (金) 13:56:03}; - 動作は期待とおりなのですが PHPでのコーデェングに悩んでいます。 -- [[時遊人]] &new{2013-06-05 (水) 11:41:48}; - ああああ -- [[あああ]] &new{2014-06-09 (月) 11:27:38}; - 助かりました!ありがとうございます -- [[りっぴ]] &new{2014-10-11 (土) 14:45:19}; - コーデェング -- [[CFJ]] &new{2015-01-16 (金) 15:40:13}; - ああああ -- &new{2015-07-29 (水) 11:16:09}; - s -- [[s]] &new{2018-07-06 (Fri) 11:37:20}; - 役に立ちました! -- [[こうたろ]] &new{2019-06-19 (Wed) 11:40:51}; - あ -- [[あ]] &new{2019-06-25 (Tue) 10:52:19}; - qwerty -- [[asdfghj]] &new{2020-01-14 (Tue) 15:21:09}; - ちんぽw -- &new{2020-08-14 (Fri) 14:08:18}; - やあ -- [[パンツ]] &new{2022-04-28 (Thu) 14:41:00}; #comment