JavaScriptのセレクトボックスの連動について
- JavaScriptにて連動するセレクトボックスを作成しました。
- 神奈川県 小田原市と選択し、ブラウザの更新をかけると、神奈川県 渋谷区になってしまいます。
- ブラウザの更新をかけた際に、双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか？
- ベストアンサー
JavaScriptのセレクトボックスの連動について
JavaScriptにて連動するセレクトボックスを作成しました。 ソースは下記となります。 ==================================================== <html> <head> <title>複数のSELECT タグ連動</title> <script type="text/javascript"> <!-- function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; var child = childArray[document.getElementById(idParent).selectedIndex]; document.getElementById(idChild).length=child.length; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i].text = child[i]; } } var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); // --> </script> </head> <body> <form name="myform" method="POST" action"#"> <select id="parent_0" onchange="selectBox(0)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_0"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_1" onchange="selectBox(1)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_1"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_2" onchange="selectBox(2)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_2"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> </form> </body> </html> ==================================================== 上記のソースで想定の動きをしてくれているのですが、 例えば、 神奈川県 小田原市 と選択し、ブラウザの更新をかけると、 神奈川県 渋谷区 になってしまいます。 ブラウザの更新をかけた際に、 双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか？ よろしくお願いします。
- snowbloom
- お礼率66% (4/6)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞神奈川県 渋谷区 だけを解消したいのであれば、 window.onload=function(){ selectBox(0); selectBox(1); selectBox(2); } とするとか？ とにかく初期化したいなら window.onload=function(){ var s=document.getElementsByTagName("select"); for(var i=0;i<s.length;i++){ s[i].selectedIndex=0; } } みたいな処理をいれる。
その他の回答 (1)
- nda23
- ベストアンサー率54% (777/1415)
サーバがHTMLを生成する時、前回指定していた所が 選択されるように仕込まない限り、希望のような 動作にならないでしょう。クライアントサイドの Scriptでどうにかなるものではありません。
お礼
そうなのですね。 Javascriptは、まだ勉強を始めたばかりなので、 知識もまだまだです。 ご回答、ありがとうございました。
関連するQ&A
- 連動するセレクトボックスの内容を増やしたい
お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが３つなのですが、 ７つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>
- ベストアンサー
- JavaScript
- セレクトボックスについて
<script type="text/javascript"> function entryChange(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == '0'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '1'){ document.getElementById('selectbox1').style.display = ""; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '2'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = ""; document.getElementById('selectbox3').style.display = "none"; } if(id == '3'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = ""; } } } window.onload = entryChange; </script> ↑こちらは表示/非表示の処理をしています。 <select id="changeSelect" name="number" onchange="entryChange();"> <option value="0">未選択</option> <option value="1">リスト1</option> <option value="2">リスト2</option> <option value="3">リスト3</option> </select> <select name="number" id="selectbox1" style="display:none"> <option value="東京都">東京都</option> <option value="京都府">京都府</option> </select> <select name="number" id="selectbox2" style="display:none"> <option value="北海道">北海道</option> <option value="沖縄県">沖縄県</option> </select> <select name="number" id="selectbox3" STYLE="display:none"> <option value="兵庫県">兵庫県</option> <option value="大阪府">大阪府</option> </select> <input type="submit" value="送信"> (1)「未選択」のまま送信すると「大阪府」が送信されます。 (2)「リスト1」→「沖縄県」を選択 「大阪府」が送信されます。(リスト2も同じ事になります。) (3)「リスト3」→「兵庫県」を選択 「兵庫県」と送信されます。 リスト3以外を選択するとなぜか「大阪府」が送信されます。 初心者なりに色々調べたのですが解決できず困っております。 よろしくお願いします。
- 締切済み
- HTML
- 動的セレクトボックスのSelectedについて
以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。 <html> <head> <script type="text/javascript"><!-- function SelectOption(parentValue, text, title, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; this.title = title; if(style) { this.style.cssText = style; } }; return this; } function SelectBox(id) { function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } var options = []; this.registOption = function(option) { options[options.length] = option; }; var child = null; this.setChild = function(childObj) { child = childObj; }; this.make = function(parentValue) { var obj = getObject(); if(obj) { obj.options.length = 0; var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } if(child) { child.make(obj.value); } } }; return this; } var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "都道府県", "1")); box1.registOption(new SelectOption(null, "神奈川県", "都道府県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "区市町村", "1")); box2.registOption(new SelectOption("1" , "中央区" , "区市町村", "2")); box1.setChild(box2); window.onload = function() { box2.make("1"); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2"></select> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスに"value"と"word"を付け加えたい。
初めての投稿をさせてもらいます。JavaScript初心者な者で解る方がいらっしゃればご教授のほど宜しくお願いします。 質問させてもらいたい事はこちらのソースに"value"と"word"を付け加えることは出来ますでしょうか？ 外部ファイルには /** * 選択肢クラス * @param parentValue 親の値(null:いつでも表示) * @param text 表示テキスト * @param value 値 * @param style ＣＳＳ(省略可) */ function SelectOption(parentValue, text, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; if(style) { this.style.cssText = style; } }; return this; } /** * セレクトボックスクラス * @param id セレクトボックスID */ function SelectBox(id) { /** * IDに対応オブジェクトを取得 * @return オブジェクトorNULL */ function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } // オプションのリスト var options = []; /** * オプション登録 * @param condition 表示条件 */ this.registOption = function(option) { options[options.length] = option; }; // 子のオブジェクト var child = null; /** * 子のオブジェクトを設定する * @param childObj 子のオブジェクト */ this.setChild = function(childObj) { child = childObj; }; /** * オプション反映 * @param parentValue 親の値(null:全部表示) * ※比較に==を使っているのでundefinedもnullと等しく扱われる。 */ this.make = function(parentValue) { var obj = getObject(); if(obj) { // 選択肢削除 obj.options.length = 0; // 表示すべき選択肢抽出 var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } // 選択肢反映 obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } // 子のオブジェクトにも連鎖反映 if(child) { child.make(obj.value); } } }; return this; } HTMLファイルには <html> <head> <title>セレクトボックス親子関係</title> <script type="text/javascript" src="Select.js" charset="Shift_JIS"></script> <script type="text/javascript"><!-- var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "1")); box1.registOption(new SelectOption(null, "神奈川県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "1")); box2.registOption(new SelectOption("1" , "中央区" , "2")); box2.registOption(new SelectOption("2" , "横浜市" , "3")); box2.registOption(new SelectOption("2" , "川崎市" , "4")); var box3 = new SelectBox("sb3"); box3.registOption(new SelectOption(null, "詳細" , "0", "color:gray;")); box3.registOption(new SelectOption("1" , "一番町" , "1")); box3.registOption(new SelectOption("3" , "みなとみらい", "2")); box1.setChild(box2); box2.setChild(box3); window.onload = function() { box1.make(null); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2" onchange="box3.make(this.value);"></select> <select id="sb3"></select> </form> </body> </html> となっております。
- 締切済み
- JavaScript
- javascriptで連動するセレクトボックス
ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。 大分類・中分類・小分類の3種類のセレクトボックスを用意し、 選んだ商品1つだけの金額をDIV要素に表示させたいのですが、 思うように動作せず行き詰ってしまいました。 現状は食べ物-果物の、リンゴかオレンジは正しく表示されるのですが、 他のものになるとセレクトボックスがうまく連動しない状況です。 ソースが長くなってしまい、大変申し訳ないのですが、 どうかお知恵を貸してください。お願いいたします。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>選択した商品のみ金額を表示させる</title> <script type = "text/javascript"> <!-- function listControl() { largeList = document.forms.formName.largeName; middleList = document.forms.formName.middleName; smallList = document.forms.formName.smallName; No = 1; //リストの数が異なる場合 middleList.options.length = 0; smallList.options.length = 0; //中分類の判定 if(largeList.options[largeList.selectedIndex].value == "食べ物"){ middleList.options[0] = new Option("果物","fruit"); middleList.options[1] = new Option("野菜","vegetable"); } else if (largeList.options[largeList.selectedIndex].value == "飲み物"){ middleList.options[0] = new Option("スープ","soup"); middleList.options[1] = new Option("ジュース","juice"); } //小分類の判定 if (middleList.options[middleList.selectedIndex].value == "fruit"){ smallList.options[0] = new Option("果物を選択してください"); smallList.options[1] = new Option("1.リンゴ","apple"); smallList.options[2] = new Option("2.オレンジ","orange"); } else if (middleList.options[middleList.selectedIndex].value == "vegetable"){ smallList.options[0] = new Option("野菜を選択してください"); smallList.options[1] = new Option("3.カボチャ","pumpkin"); smallList.options[2] = new Option("4.イモ","potato"); } else if (middleList.options[middleList.selectedIndex].value == "soup"){ smallList.options[0] = new Option("スープを選択してください"); smallList.options[1] = new Option("5.みそ汁","miso"); } else if (middleList.options[middleList.selectedIndex].value == "juice"){ smallList.options[0] = new Option("ジュースを選択してください"); smallList.options[1] = new Option("6.ミックスジュース","mix"); smallList.options[2] = new Option("7.グレープフルーツ","grapefruit"); smallList.options[3] = new Option("8.トマトジュース","tomato"); } } //div要素を非表示にする function resetBtn(){ for(i=1; i<=8; i++){ document.getElementById("buyList"+[i]).style.display="none"; } } //--> </script> </head> <body> <div class="futoSelectForm"> <form name="formName"> <!--選択肢その1--> <select name = "largeName" onChange="listControl()"> <option value = "">種類を選択してください</option> <option value = "食べ物">食べ物</option> <option value = "飲み物">飲み物</option> </select> <!--選択肢その2（選択肢の項目によって変化）--> <select name = "middleName"> </select> <!--選択肢その3（選択肢の項目によって変化）--> <select name = "smallName" onchange="document.getElementById('buyList'+No).style.display='none';document.getElementById('buyList'+(No=(this.selectedIndex))).style.display='block'"> </select> <input type="button" value="リセット" onclick="resetBtn();"> </form> </div> <div id="buyList0" style="display:none;"></div> <div id="buyList1" style="display:none;">果物：1.リンゴ 120円</div> <div id="buyList2" style="display:none;">果物：2.オレンジ 80円</div> <div id="buyList3" style="display:none;">野菜：3.カボチャ 210円</div> <div id="buyList4" style="display:none;">野菜：4.イモ 40円</div> <div id="buyList5" style="display:none;">スープ：5.みそ汁 50円</div> <div id="buyList6" style="display:none;">ジュース：7.ミックスジュース 180円</div> <div id="buyList7" style="display:none;">ジュース：8.グレープフルーツジュース 150円</div> <div id="buyList8" style="display:none;">ジュース：9.トマトジュース 160円</div> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスの選択により、点数および配列を表示
<html> <head> <!DOCTYPE html> <meta charset="utf-8"> <script type="text/javascript"> function change(selbox) { var txt1 = document.getElementById("txt1"); var txt2 = document.getElementById("txt2"); switch(selbox.value){ case '1': txt1.style.display = ""; txt2.style.display = "none"; break; case '2': txt1.style.display = "none"; txt2.style.display = ""; break; default: } var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; var str=''; for (var i = 0; i < todo.length; i++) { str += todo[i] + '<BR>'; } document.getElementById('message_area').innerHTML = str; } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1" onchange="change(this)"> <option value="">選択肢</option> <option value="1">名古屋市</option> <option value="2">松山市</option> <option value="3">金沢市</option> <option value="4">高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2" onchange="change(this)"> <option value="">選択肢</option> <option value="1">名古屋市</option> <option value="2">松山市</option> <option value="3">金沢市</option> <option value="4">高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> テキスト１<input type="text" id="txt1" name="txt1"><BR> テキスト２<input type="text" id="txt2" name="txt2"><BR> <div id="message_area" /> <body> </html>
- 締切済み
- JavaScript
- select option value が IE だけで動かない
select の option 項目を追加する javascript を組んでいるのですが IE だけ項目追加ができません。Windows の Firefox2、Safari は期待 通りに項目が追加できました。 option.value を指定しないと IE でも追加できます。IE 専用に特別な 別プログラムが必要なのでしょうか。ご存知の方よろしくお願いします。 var selectBox = document.getElementById("select1"); var option = document.createElement('option'); option.setAttribute('value','my_value'); option.appendChild(document.createTextNode('my_text')); selectBox.appendChild(option); ３行目をコメントアウトすれば IE でも select にデータが追加され ますが、肝心の value がないのでプログラム的にダメなんです。
- ベストアンサー
- JavaScript
- セレクトボックスで選んだ配列を呼び込むプログラム。
以下は、セレクトボックス1と2でそれぞれ松山市と高松市を選んだら、配列を呼び出すことができるプログラムです。 <script type="text/javascript"> function change() { if (document.getElementById("selbox")) { selboxValue = document.getElementById("selbox").value; if (selboxValue == "1") { //文字1を表示 document.getElementById("txt1").style.display = ""; //文字2を非表示 document.getElementById("txt2").style.display = "none"; } else if (selboxValue == "2") { //文字2を表示 document.getElementById("txt2").style.display = ""; //文字1を非表示 document.getElementById("txt1").style.display = "none"; } } } function kotae() { ten=0 if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市")) {f.q1.style.backgroundColor="aqua ";ten = ten + 50} else f.q1.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten const keywords = ['あいうえお','かきくけこ', 'さしすせそ']; if (f.tokuten.value=50) { for (let i = 0; i < keywords.length; i++) { console.log(f.rank.value=keywords[0]); }} else if(f.tokuten.value >=20){f.rank.value = 'B'} else if(f.tokuten.value >=15){f.rank.value = 'C'} else if(f.tokuten.value <10){f.rank.value = 'D'} //ここまで } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点 <!--HTMLここから--> <input name=rank class="hoge">ランク <!--HTMLここまで--> しかし、僕はもうちょっと踏み込んだところまで行きたいのです。 ブラウザに表示させたいのです。 document.writeで書くと別のページに遷移してしまうし、 一方でalertだと文章が読みづらいです。 ブラウザに配列を表示するものは以下のプログラムですが、 <script> var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; for (var i = 0; i < todo.length; i++) { var todoList = document.createElement('li'); todoList.textContent = todo[i]; document.getElementById('list').appendChild(todoList); } </script> ただ、これだとセレクトボックスで松山市と高松市を選んだ場合の表示ができません。どうしたらいいのでしょうか。 どうしたらいいのでしょうか。
- ベストアンサー
- JavaScript
- 連動セレクトボックスを同一ページにもう一つ追加したい
今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・ 例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.MENUC.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。 が何度やっても上手くいきません。
- ベストアンサー
- JavaScript
- セレクトボックス自動表示
以前http://okwave.jp/qa/q6872183.htmlにてご質問させていただきました。 合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。 <script type="text/javascript"> function calculate(){ var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value); var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value); var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value); var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value); if(isNaN(test1)){test1 = 0;} if(isNaN(test2)){test2 = 0;} if(isNaN(test3)){test3 = 0;} if(isNaN(test4)){test4 = 0;} document.getElementById('total').innerHTML = test1 + test2 + test3 + test4; } </script> <select name="test1" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test2" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test3" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test4" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test5" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <p id="total">0</p> がソースになります。 お分かりの方がいらっしゃいましたらご教示お願いします。
- ベストアンサー
- JavaScript
お礼
window.onload=function(){ var s=document.getElementsByTagName("select"); for(var i=0;i<s.length;i++){ s[i].selectedIndex=0; } } で実行したところ、 処理させたかった動きになりました。 ありがとうございました。