- 締切済み
プルダウンに追加項目を加える方法
過去記事にあった下記のプルダウンを使用させて頂いております。 選択できる項目を「くだもの→りんご→●●」ともうひとつ追加 するにはどうしたらよいのでしょうか？ どうぞよろしくお願いします。 <html> <head> <script> <!-- /* データ定義部(ここをDB検索結果から生成) */ var dataMain = new Array( new Array("1", "くだもの"), new Array("2", "やさい"), new Array("3", "さかな") ); var dataSub = new Array( new Array( new Array("1", "りんご"), new Array("2", "みかん"), new Array("3", "いちご") ), new Array( new Array("1", "にんじん"), new Array("2", "だいこん"), new Array("3", "きゅうり") ), new Array( new Array("1", "さば"), new Array("2", "いわし"), new Array("3", "さんま") ) ); // プルダウンを初期化 function initSel() { var selMain = document.forms[0].elements["selMain"]; // メインのプルダウンを初期化 setDataToSel(selMain, dataMain); // 先頭を選択 selMain.selectedIndex = 0; // 先頭を選択したのと同じ処理 changeSel(); } // プルダウンを選択したときの処理 function changeSel() { var selMain = document.forms[0].elements["selMain"]; var selSub = document.forms[0].elements["selSub"]; // メインのプルダウンの選択値によりサブの選択肢データを取得 var data = dataSub[selMain.selectedIndex]; // サブのプルダウンの選択肢を入れ換え setDataToSel(selSub, data); } // データを選択肢にセット function setDataToSel(sel, data) { // 選択肢をいったんクリア for(var i = 0 ; i < sel.options.length ; i++) { sel.options[i] = null; } // 新しい選択肢を作る for(var i = 0 ; i < data.length ; i++) { var dt = data[i]; sel.options[i] = new Option(dt[1], dt[0]); } } //--> </script> </head> <body onLoad="initSel()"> <form> <p> メイン： <select name="selMain" size="1" onChange="changeSel()"></select> </p> <p> サブ： <select name="selSub" size="1"></select> </p> </form> </body> </html>
- nafufuna
- お礼率92% (12/13)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <form> <p> メイン： <select name="selMain" size="1" onChange="changeSel()"></select> </p> <p> サブ： <select name="selSub" size="1" onChange="changeSel2()"></select> </p> <p> さらにサブ： <select name="selSub2" size="1"></select> </p> </form> </body> <script type="text/javascript"> var dataMain = [ [ "1", "くだもの"],[ "2", "やさい"],[ "3", "さかな"]]; var dataSub = new Array( new Array( new Array("1", "りんご"), new Array("2", "みかん"), new Array("3", "いちご") ), new Array( new Array("1", "にんじん"), new Array("2", "だいこん"), new Array("3", "きゅうり") ), new Array( new Array("1", "さば"), new Array("2", "いわし"), new Array("3", "さんま") ) ); var dataSub2 = [ [ [["1", "ふじ"],["2", "むつ"],["3", "つがる"]], [["1", "夏みかん"],["2", "きんかん"],["3", "ぽんかん"]], [["1", "栃おとめ"],["2", "くさりかけ"],["3", "白カビつき"]] ], [ [["1", "１号"],["2", "赤２号"],["3", "やっぱりくさりかけ"]], [["1", "桜島だいこん"],["2", "かいわれ"],["3", "おでん用"]], [["1", "漬物用"],["2", "わかんねぇ～"],["3", "あっはっは"]] ], [ [["1", "缶詰"],["2", "しめ鯖"],["3", "味噌似"]], [["1", "大きめ"],["2", "ちっちぇ～"],["3", "あぁ～ボキャブラリーない！"]], [["1", "のまんま"],["2", "からくり"],["3", "・・・。"]] ] ]; var selMain = document.forms[0].elements["selMain"]; var selSub = document.forms[0].elements["selSub"]; var selSub2 = document.forms[0].elements["selSub2"]; selMain.selectedIndex = 0; setDataToSel(selMain, dataMain); changeSel(); function changeSel() { setDataToSel(selSub, dataSub[selMain.selectedIndex]); setDataToSel(selSub2, dataSub2[selMain.selectedIndex][ selSub.selectedIndex]); } function changeSel2() { setDataToSel(selSub2, dataSub2[selMain.selectedIndex][ selSub.selectedIndex]); } function setDataToSel(sel, data) { var i; for(i = 0 ; i < sel.options.length ;) sel.options[i++] = null; for(i = 0 ; i < data.length ; i++) sel.options[i] = new Option(data[i][1], data[i][0]); } </script>
４つ手前にヒント有り。
お礼
ありがとうございました。 できれば上記のスクリプトで実現したのですが難しいでしょうか？
関連するQ&A
- 3連セレクトボックスで選択肢を変更し条件を絞り込む
現在、JavaScriptの勉強中です。 三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。 例えば最初のセレクトボックスで「都道府県」を選択させ、選んだ段階で、二番目のセレクトボックスに選んだ都道府県の中にある「市町村」を表示させる、 次に二番目の「市町村」の一つを選んだ段階で、三番目のセレクトボックスに選んだ「市町村」内の支店名を表示させ選択させる。というものです。 以下のようなソースがあるのですが、この内容だと、最初の選択肢の数が10個を超えた段階で次の選択肢が作動しなくなる事が、 動作上で確認されました。 一つのセレクトボックスの選択肢の数を100個程度、或いは、理論上無制限にするには、どの様にしたらよいかを考えています。 できれば、現在のソースのロジックの解説も併せて、ご教授頂ければ幸いです。 以下JavaScript内容--------------- var data = new Array("都道府県は？","東京都","神奈川","千葉"); var data0 = new Array("---"); var data1 = new Array("区は？","千代田区","中央区","品川区"); var data2 = new Array("市町村は？","横浜市","川崎市"); var data3 = new Array("市町村？","千葉市","市原市"); var data10 = new Array("---"); var data11 = new Array("支店名は？","千代田1号店","千代田2号店","千代田3号店"); var data12 = new Array("支店名は？","中央区1号店","中央区2号店","中央区3号店","中央区4号店","中央区5号店"); var data13 = new Array("支店名は？","品川1号店","品川2号店"); var data20 = new Array("---"); var data21 = new Array("支店名は？","横浜1号店","横浜2号店","横浜3号店","横浜4号店"); var data22 = new Array("支店名は？","川崎1号店","川崎2号店","川崎3号店"); var data30 = new Array("---"); var data31 = new Array("支店名は？","千葉1号店","千葉2号店"); var data32 = new Array("支店名は？","市原1号店"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ obj.options[i] = new Option(arr[i]); obj.options[i].value = arr[i];}} 以下、HTML内容--------------- <body onLoad="SetList('sel0', data);" style="margin:0px;"> <div> <form> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel2',data0);SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;" onChange="SetList('sel2', eval('data' + document.forms[0].sel0.selectedIndex + this.selectedIndex))"> <option>---</option> </select> <select id="sel2" name="sel2" style="width:160px;"> <option>---</option> </select> </form> </div> </body>
- ベストアンサー
- JavaScript
- サブウィンドウのリンクに応じて親ウィンドウのセレクトメニューにデータを反映させる
よろしくお願いします。 子ウィンドウ側の地下鉄南北線という文字リンクをクリックすると 00:北24条駅","01:札幌駅","02:大通駅"が親ウィンドウのセレクトメニューに反映されるように変えたいのです。下記のスクリプトを使ってどのように親ウィンドウと子ウィンドウに分ければいいのでしょうか？ 駅名の数はそれぞれのリンクによって違います。 <html> <head> <title>セレクトメニューで選択したものに応じて2つめのセレクトメニューに反映させる</title> <script language="JavaScript" type="text/JavaScript"> <!-- var data = new Array(":交通",":地下鉄南北線",":地下鉄東西線",":地下鉄東豊線"); var data0 = new Array(":---"); var data1 = new Array("00:北24条駅","01:札幌駅","02:大通駅"); var data2 = new Array("10:西18丁目駅","11:西11丁目駅","12:大通駅","13:バスセンター前","14:東札幌"); var data3 = new Array("20:札幌駅","21:大通駅","22:豊水すすきの"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ var a = arr[i].split(":"); obj.options[i] = new Option(a[1], a[0]); } } //--> </script> </head> <body onLoad="SetList('sel0', data);"> <form name="form1"> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;"> <option>---</option> </select> </form> </body> </html> どなたか教えていただける方がいましたらどうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- ２つのプルダウンの連動に関して
２つのプルダウンの連動に関して javascript の話になってしまうかと思われますが、教えて下さい。 ２つのプルダウンを連動させたいと考えていますが、単純に決められた項目を初期値として 設定するようなプルダウンであれば問題なくできますが、テーブルから取得したデータをプルダウン にセットした後に制御を掛けたいと考えています。 以下のようなソースを活用できないか？と考えていますが、どのような方法があるでしょうか。。。。 《活用ソース》 <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=JavaScript> <!-- function funcSubmit() { if (document.formMain.pref.selectedIndex == 0 && document.formMain.city.selectedIndex == 0) { window.alert("都道府県と市町村を選択してください"); return false; } else { return true; } } function funcMain(b) { if (document.formMain.pref.selectedIndex == 0) { document.formMain.city.length = 1; document.formMain.city.selectedIndex = 0; } else { if (b) { document.formMain.city.length = 1; document.formMain.city.selectedIndex = 0; } var city = cities[document.formMain.pref.selectedIndex - 1]; document.formMain.city.length = city.length + 1; for (var i = 0; i < city.length; i++) { document.formMain.city.options[i + 1].value = i; document.formMain.city.options[i + 1].text = city[i]; } } } ↓↓↓↓ ※これらの情報をテーブルから取得したデータとしたい。↓↓↓↓ var prefs = new Array("東京都", "大阪府", "愛知県", "千葉県"); var cities = new Array(); cities[0] = new Array("小平市", "町田市", "三鷹市"); cities[1] = new Array("大阪市", "豊中市"); cities[2] = new Array("名古屋市", "半田市"); cities[3] = new Array("千葉市", "市川市", "柏市"); // --> </SCRIPT> </HEAD> <BODY onLoad="funcMain(false)"> <FORM NAME=formMain METHOD=POST ACTION=result.asp onSubmit="return funcSubmit()"> <SELECT NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(都道府県を選択してください) <OPTION VALUE="0">東京都 <OPTION VALUE="1">大阪府 <OPTION VALUE="2">愛知県 <OPTION VALUE="3">千葉県 </SELECT> <SELECT NAME="city"> <OPTION VALUE="" SELECTED>(市町村を選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> <INPUT TYPE=submit VALUE="登録"> </FORM> </BODY> </HTML>
- ベストアンサー
- PHP
- ２つのプルダウンの結果を別フレームへ
はじめまして。一方のフレームには２つのプルダウンを作りボタンクリックでその結果(リンク)をもう一方のフレームで表示させたいのですが、うまくいかず困ってます。どなたかよろしくお願いします。 それぞれフレームの名前は、 プルダウンのフレーム・・・・・top それを表示させたいフレーム・・und と付けました。 プルダウンの方のソースは以下のようになってます。 <!--webbot bot="HTMLMarkup" startspan --> <form name="doublecombo" > <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> <option>月曜日</option> <option>火曜日</option> </select><br><br> <select name="stage2" size="1"> <option>時限選択</option> </select><br><br> <input type="button" name="test" value="時間割" onClick="go()" > </p> <script> <!-- var groups=document.doublecombo.example.options.length var group=new Array(groups) for (i=0; i<groups; i++) group[i]=new Array() group[0][0]=new Option("１時限","/○○○.html") group[0][1]=new Option("２時限","/○○○.html") group[0][2]=new Option("３時限","/○○○html") group[1][0]=new Option("１時限","/○○○.html") group[1][1]=new Option("２時限","/○○○.html") group[1][2]=new Option("３時限","/○○○.html") var temp=document.doublecombo.stage2 function redirect(x){ for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<group[x].length;i++){ temp.options[i]=new Option(group[x][i].text,group[x][i].value) } temp.options[0].selected=true } function go(){ location=temp.options[temp.selectedIndex].value } //--> </script>
- 締切済み
- JavaScript
- 二つのプルダウンメニューから違うページにジャンプしたい
以前ここで"steel gray"さんから教えて頂いたのですが、自分で手を加えている内に分からなくなってしまいました。ご指導お願い致します。 function jump(Form){ //以下、selectの組み合わせとジャンプ先のリスト。 var jumpList = new Array( ['1','A','http://www.k2.dion.ne.jp/~namae/osietea1.html'], ['1','B','http://www.google.co.jp/'], ['2','A','http://www.yahoo.co.jp/'], ['2','B','http://www.infoseek.co.jp/'], ['','','']); for(var i=0;i<jumpList.length;i++) { if(jumpList[i][0] == Form.elements[0].value && jumpList[i][1] == Form.elements[1].value) window.location.href=jumpList[i][2]; } } //--> </script> <OPTION value="A">選択肢A</OPTION> 以下選択肢Aに6種類 <OPTION value="1">選択肢B</OPTION> 以下選択肢Bに9種類 合計54種類の条件があります。どこをどの様にすればよいのでしょうか？宜しくお願いします。
- ベストアンサー
- JavaScript
- プルダウンを2個選び、その結果に基づき、値を返す。
プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。
- 締切済み
- JavaScript
- プルダウンメニューのリンクで別ウインドウを開く
下記のようなプルダウンメニューを作成したのですが、同じウインドウ内でリンクするのではなく別ウインドウで開くようにするにはどこを変更すればよいのでしょうか？ head内>>>>>>>>>>>>> <script language="JavaScript" type="text/JavaScript"> <!-- function gotoURL(formName){ var gotoUrl=document.forms[formName].elements[0].options[document.forms[formName].elements[0].selectedIndex].value document.location.href=gotoUrl } --> </script> body内>>>>>>>>>>>>>> <form name="fm0"> <select name="links"> <option selected>＜ここから選択してください＞</option> <option value="aaa.html">あああ</option> <option value="bbb.html">びびび</option> </select> <input name="BUTTON" TYPE=BUTTON onClick="gotoURL('fm0')" VALUE="GO!"></form>
- ベストアンサー
- グラフィックソフト
- プルダウンメニューの連動で・・・
function change(){ item_date = form.cat1.selectedIndex; item_value= form.cat1.options[item_date].value; var i; switch(item_value) { case "1": listArray = new Array(); listArray[0] = new Option("aaa","縺ゅ≠縺・quot;); listArray[1] = new Option("sss","www"); break; case "2": listArray = new Array(); listArray[0] = new Option("222","333"); listArray[1] = new Option("333","333"); listArray[2] = new Option("444","444"); listArray[3] = new Option("555","444"); break; } for(i=0;i < listArray.length;i++){ document.form.cat2.options[i] = listArray[i]; } } このようにしてみたのですが、 2を選択してから1を選択すると、2で選択した「444」と「555」が残ってしまいます。 一度消してしまおうとしたのですが、document.form.cat2.reset();ではエラーが出てしまいます。(オブジェクトが選択されていない) どのようにしてクリアすれば良いのでしょうか？
- 締切済み
- JavaScript
- 複数のプルダウンの連動とリンク
複数の連動するプルダウンを作成し、さらに最後のページをリンクで 飛ばしたいのですが、java初心者のためそのように記述してよいのか 分かりません。 ３つのプルダウンであれば他のページに記述例があったのですが、 増やす時などにどこをいじればよいか分かりませんでした。 下記ソースは他サイトからのものですが、最後のプルダウンにリンク貼れますか？ 他の記述でもかまいませんので教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"><!-- function ResetOptions( index ) { var select = document.getElementById( "select" + index ); while( select ) { for( var i = 0, len = select.length; i < len; i++ ) { select.options[0] = null; } CreateOption( select, "", "項目" + ( index - 1 ) + "を選択してください" ); index++; select = document.getElementById( "select" + index ); } } function CreateOption( select, key, value ) { var option = document.createElement( "OPTION" ); option.setAttribute( "value", key ); var text = document.createTextNode( value ); option.appendChild( text ); select.appendChild( option ); } function CreateOptions( index, value, pleaseSelect ) { var select = document.getElementById( "select" + index ); if( ! select ) { return; } for( var i = 0, len = select.length; i < len; i++ ) { select.options[0] = null; } var option, text, list; if( index > 1 ) { if( value ) { list = dataList[index-1][value]; } else { ResetOptions( index ); return; } } else { list = dataList[0]; } if( pleaseSelect ) { CreateOption( select, "", "↓選択してください" ); } for( var key in list ) { CreateOption( select, key, list[key] ); } ResetOptions( index + 1 ); } var dataList = [ { "asia": "アジア", "europe": "ヨーロッパ", "south_america": "南米" }, { "asia" : { "japan": "日本", "korea": "韓国" }, "europe": { "italy": "イタリア", "spain": "スペイン", "sweden": "スウェーデン" }, "south_america": { "brazil": "ブラジル", "argentina": "アルゼンチン" } }, { "japan": { "": "38位" }, "korea": { "": "45位" }, "italy": { "": "3位" }, "spain": { "": "4位" }, "sweden": { "": "30位" }, "brazil": { "": "2位" }, "argentina": { "": "1位" } } ]; window.onload = function() { CreateOptions( 1, null, true ); ResetOptions( 2 ); }; //--></script> </head> <body> <h1>サッカー世界ランク</h1> <p>地域：<select id="select1" onchange="CreateOptions( 2, this.options[this.selectedIndex].value, true );"></select></p> <p>国：<select id="select2" onchange="CreateOptions( 3, this.options[this.selectedIndex].value, false );"></select></p> <p>順位：<select id="select3"></select></p> </body> </html>
- 締切済み
- JavaScript
- 連動プルダウン 確認画面から戻ると初期化される
いつもお世話になります。 javascript初心者です。 以下のページを参考に、プルダウンが連動して選択肢が変わるフォームを作成しました。 http://d.hatena.ne.jp/Mars/20071109 ==HTML ココカラ============================================= <html> <head> <script src="./js/ConnectedSelect.js" type="text/javascript"></script> </head> <body> <form> <select name="sel1" id="SEL1"> <option value="" selected>--------- 選択してください ---------</option> <option value="1" >果物</option> <option value="2" >野菜</option> </select> <select name="sel12" id="SEL2"> <option value="" selected>--------- 選択してください ---------</option> <optgroup label="1"> <option value="1" >モモ</option> <option value="2" >スイカ</option> <option value="3" >ブドウ</option> </optgroup> <optgroup label="2"> <option value="4" >きゅうり</option> <option value="5" >トマト</option> <option value="6" >レタス</option> </optgroup> </select> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2']); </script> <input type="submit" value="確認"> </form> </body> </html> ==HTML ココマデ============================================= ==ConnectedSelect.js ココカラ============================== function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); } ==ConnectedSelect.js ココカラ============================== ちゃんと連動できて喜んでいたのですが、入力画面から確認画面に移動し、修正するために戻ると、子プルダウンの値が初期状態（選択していない状態）に戻ってしまっていました。 こちらを選択した状態を保持しておく方法はないでしょうか。 教えていただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
早速ご回答頂きありがとうございます。 選択できるプルダウンをもうひとつ追加する場合、どのようにコードを 書いたらよいのでしょうか？ もし差し支え無ければお教え下さいますようお願い致します。