- ベストアンサー
２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>
- akomot
- お礼率96% (200/207)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは、length属性の値とOptions配列のサイズに不整合が起きているのかなと思います。なんでそうなのかは不明ですが、、、 setSubMenu関数の内容を以下のように変えてみました。 // 変数名が長いので、別変数で参照します。 var targetOptions = document.FORM1.MENUB.options; // 現在のサイズより今の選択項目配列サイズが多ければ縮小。 if (txt[area].length < targetOptions.length) { targetOptions.length = txt[area].length; } // 選択項目配列に値をつけなおします。 var i = 0; for (i=0; i<txt[area].length; i++){ targetOptions[i] = new Option(txt[area][i], txt[area][i]); }
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
for (i=0; i<document.FORM1.MENUB.length; i++){ を for (i=document.FORM1.MENUB.length-1; i>=0; i--){ に変更して下さい。
お礼
ありがとうございます。 教えていただいたとおりやってみたのですがやっぱりうまくいきません。もう少し研究してみます。
関連するQ&A
- 連動セレクトボックスを同一ページにもう一つ追加したい
今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・ 例えばですけど 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
- セレクトボックス連動
過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </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> <select name="menub" > </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セクトボックスの連携の仕方。
こんにちは。 過去の質問とか見たのですが、どうしても解決ができなかったので、質問させて下さい。 JavaScriptの部分に <script type="text/javascript"> <!-- ere = [ ["神戸","三宮(中央区)","元町・ハーバーランド周辺（中央区）","北野 （中央区）","六甲・御影・岡本・住吉 （灘・東灘区）","新開地（兵庫・長田区）","須磨・垂水区","伊川谷（西区）","北区"], ["芦屋","ＪＲ芦屋駅より北","ＪＲ芦屋駅より南"], ["西宮","ＪＲ西ノ宮駅周辺","阪急西宮北口周辺","苦楽園・夙川"] ]; --> </script> <script type="text/javascript" > <!-- window.onload=function (){ for(var i=0; i<ere.length; i++){ document.form1.eria.options[i] = new Option(ere[i][0],ere[i][0]); } setSubMenu3(0); }; function setSubMenu3(no){ document.form1.tiku.length=0; for(var j=1; j<ere[no].length; j++){//配列の数をさらに一つ減らす document.form1.tiku.options[j-1] = new Option(ere[no][j],ere[no][j]); }} // --> </script> と記述し、 フォームに <form name="form1" method="post" action="tenpo2.php"> <select name="eria" id="eria" onChange="setSubMenu3(this.selectedIndex)"> </select> <select name="tiku" id="tiku"> </select> </form> と書いています。 サーバーにアップして動かしてみてるのですが、 セレクトボックスに何も表示されません・・・ もう何がなんだかって感じなんですが、どうか助けてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Javascriptの動的リスト作成について
Javascriptの動的リスト作成について お世話になっています。 Javascriptで選択リストを動的に変えたいと思っています。 また、Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。 そこで、下記のようにスクリプトを書きました。リスト２(smallwheretag)が1つのみ選択を許すときは、うまくいったのですが、multipleにするためにnameを配列にしたところ、うまくリストが作成できなくなってしまいました。 なにかスクリプトに変更が必要なのでしょうか？ご教授お願いいたします。 <HTML部> <select name="bigwheretag[]" onchange="javascript:listChange(this.value);"> <option value="">検索項目</option> <option value="11%">自然</option> <option value="12%">街</option> <option value="13%">家庭</option> </select> <select name="smallwheretag[]" multiple> <option value="">大項目を選択して下さい</option> </select> <Javascript部> var where1_text = new Array("川", "海", "山", "滝", "その他"); var where1_value = new Array("1101", "1102", "1103", "1104", "1199"); flag1 = document.form.bigwheretag.value; if (flag1=="11%") { document.form.smallwheretag.length = where1_text.length; for(var i=0; i<where1_text.length; i++) { document.form.smallwheretag.options[i].text = where1_text[i]; document.form.smallwheretag.options[i].value = where1_value[i]; } }・・・・・・・・以下同様
- ベストアンサー
- JavaScript
- セレクトメニュー連動のテキストをクリアにしたい
下記のサンプルがあります。 <html> <head> <title>form TEST</title> <script> <!-- menuItem = [["－選んで下さい－","いち","に","さん"], ["－選んで下さい－","ひい","ふう","み"], ["－選んで下さい－","もの","じ","とり"]]; function check(){ len = document.form.three.options.length; for (i=0; i<len; i++){ document.form.three.options[i] = null; } n = document.form.one.value; if(n == "1"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[0].length; i++){ document.form.three.options[i] = new Option(menuItem[0][i],menuItem[0][i]); } }else if(n == "2"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[1].length; i++){ document.form.three.options[i] = new Option(menuItem[1][i],menuItem[1][i]); } }else if(n == "3"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[2].length; i++){ document.form.three.options[i] = new Option(menuItem[2][i],menuItem[2][i]); } } } msgtxt = new Array(); for (i=0; i<3; i++){msgtxt[i] = new Array(); } msgtxt[0][0] =" "; msgtxt[0][1] ="あいうえお"; msgtxt[0][2] ="かきくけこ"; msgtxt[0][3] ="さしすせそ"; msgtxt[1][0] =" "; msgtxt[1][1] ="たちつてと"; msgtxt[1][2] ="なにぬねの"; msgtxt[1][3] ="はひふへほ"; msgtxt[2][0] =" "; msgtxt[2][1] ="まみむめも"; msgtxt[2][2] ="やゆよ"; msgtxt[2][3] ="わゐうゑを"; function txtchg(){ x = document.form.two.selectedIndex; y = document.form.three.selectedIndex; document.form.four.value = msgtxt[x][y]; } // --> </script> </head> <body onLoad="check()"> <form name= "form"> Value１ <select name="one" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value２ <select name="two" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value３ <select name="three" style="visibility:hidden" onchange="txtchg()"> </select> Value４ <textarea name="four" rows="1" cols="10"></textarea> </form> </body> </html> これは、Value1の選択値によってValue3の選択肢を変えて、Value2とValue3の選択値の組み合わせの結果をValue4に記入するという動作のサンプルです。 でもこれですと、Value2とValue3の結果でValue４に記入された後に、Value1やValue2を変更した場合、Value3は初期値に戻るのですが、Value4はそのまま表示されたままになってしまいます。本当はValue3が初期値に戻ったのだから、その場合はValue4をクリアにしたいのですが。 どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。
- ベストアンサー
- 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_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・ すみませんがご教授のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
- すみません・・・
<HTML> <HEAD> <script type="text/javascript"> a1=new Array("東京","大阪","名古屋","福岡"); a2=new Array("日本","アメリカ","イギリス","ロシア"); function chg(sel) { if (sel.value == "1") { for (i = document.F1.bbb.options.length; i>=0; i--) { document.F1.bbb.options[i] = null; } for (i = 0; i < a1.length; i ++) { document.F1.bbb.options[i] = new Option(a1[i], i); } } if (sel.value == "2") { for (i = document.F1.bbb.options.length; i>=0; i--) { document.F1.bbb.options[i] = null; } for (i = 0; i < a2.length; i ++) { document.F1.bbb.options[i] = new Option(a2[i], i); } } } </script> </HEAD> <BODY> <FORM ACTION="." name="F1"> 以前質問したのですが、似たような質問をさせてください。 <INPUT value="1" type="radio" name="area" onClick="chg(this)">日本</INPUT> <INPUT value="2" type="radio" name="area" onClick="chg(this)">海外</INPUT> <BR> <SELECT NAME="bbb"> <OPTION value="0"> </SELECT> </FORM> </BODY> </HTML> ---------------------------- 上記の場合、海外、イギリスを選択して別ソースへ データをわたしたいのですが、areaにはなにも入っていません。 どうすれば選択した内容のデータが渡す事ができるのでしょうか？
- 締切済み
- HTML
- JSでセレクトボックスの内容を切り替えたい
年末を向かえましたが、クリアできない問題を抱えて焦っています。 あるショッピングサイトを構築しておりますが、 商品詳細ページでカラーを選択するとそれに対応したサイズを 表示させたいと思っています。 カラー、サイズ共に異なるセレクトボックスを使用しております。 //サンプルデータ（2次元配列） var dataStock = new Array(new Array("ブラック", "S", 2), new Array("ブラック", "M", 3), new Array("ホワイト", "S", 1), new Array("ホワイト", "M", 2), new Array("ホワイト", "L", 1), new Array("レッド", "M", 3), new Array("レッド", "L", 2)); var dataSize = new Array(); //----------------- とりあえずデータ表示 ----------------- document.write("<table border='1'>"); for(i=0; i<data.length; i++) { document.write("<tr>"); for(n=0; n<data[i].length; n++) { document.write("<td>"+data[i][n]+"</td>"); } document.write("</tr>"); } document.write("</table><br /><br />"); //----------------- カラー表示 ----------------- document.write("<select name='color' onchange=getNo2(this.value);>"); for(i=0; i<data.length; i++) { document.write("<option value='"+data[i][0]+"'>"+data[i][0]+"</option>"); } document.write("</select><br /><br />"); //----------------- サイズ表示 ----------------- function getNo2(color) { document.write("<select name='size'>"); for(i=0; i<data.length; i++) { //↓2次元配列から選択したカラーの情報を取得 if(color == data[i][0]) { dataSize[i] = data[i][1]; document.write("<option value='"+dataSize[i]+"'>"+dataSize[i]+"</option>"); } } document.write("</select>"); } 上記処理だと、「対応したカラーのサイズを表示する」という 目的は達成できますが、カラーを選択すると ページ全部がサイズに上書きされ、サイズのセレクトボックスしか 表示されません。 当たり前ですが・・・ いろいろ試してみましたが、どれもうまく行きませんでした。 何か良いアドバイスがあればご教授下さい。 よろしくお願い致します。
- 締切済み
- JavaScript
- KENT WEBのPostMail内でのjavascript
KENT WEBのPostMailを利用して作ったフォームメールは正常に出来たのですが、java scriptを使用したプルダウン項目を貼り付けたところうまく作動しません。(エラーが出ます)具体的には以下の複数プルダウンでの選択絞込み式を入れたいのですが、根本的に無理なのでしょうか？ 又、技術的に不可能な場合、結果的に同じようなPostMailが作れる方法が無いでしょうか？ <html> <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; prefItem = [ ["千葉県", "東京都", "神奈川県", "山梨県"], ["新潟県", "長野県", "富山県"], ["静岡県", "愛知県", "岐阜県", "三重県"] ]; len = document.form1.PrefID.options.length; for (i=len-1; i>0; --i)document.form1.PrefID.options[i] = null; if(n!=0){ document.form1.PrefID.style.visibility = "visible"; for (i=0; i<prefItem[n-1].length; i++)document.form1.PrefID.options[i+1] = new Option(prefItem[n-1][i]); } setPref(0); } function setPref(n) { cityItem = [ [["chiba 1", "chiba 2"],["tokyo 1", "tokyo 2"],["kana 1", "kana 2"], ["yama 1", "yama 2"]], [["nigata 1", "nigata 2"],["nagano 1", "nagano 2"],["toyama 1", "toyama 2"]], [["shizu 1", "shizu 2"],["aichi 1", "aichi 2"],["gifu 1", "gifu 2"], ["nakao mie 1", "nakao mie 2"]] ]; len = document.form1.CityID.options.length; for (i=len-1; i>0; --i) document.form1.CityID.options[i] = null; if(n==0)return; document.form1.CityID.style.visibility = "visible"; for (i=0; i<cityItem[area-1][n-1].length; i++) document.form1.CityID.options[i+1] = new Option(cityItem[area-1][n-1][i]); } //--> </script> </head> <body> <form name="form1"> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> <select name="CityID" onChange=""><option value="0" selected>▼選択してください</option></select> </form> </body> </html>
- ベストアンサー
- HTML
- リストボックスに追加した全ての値を取得したいのですが・・・
No.172288で質問したものですが まだJavaScriptを勉強しはじめたばかりでまた壁にぶつかってしまいました。 Bのリストボックスの値をAに追加して他のページにPOSTで送りたいのですが Aに追加された値をすべて送りたいのです。 それで、まずすべての値をとれるかどうかを確認するためにSubmitボタンを押して すべてを表示させるものを作ってみたのですが、どうしても 一番目（つまりiが0のAAAAA）しか表示できません。 エラーも出ないのでどこが間違っているのかがわからないのですが どこが間違っているのでしょうか。 何度もすみませんがよろしくおねがいします。 <html> <head> <title></title> </head> <script type="text/JavaScript"> <!-- function addItem() { A = document.X.A; B = document.X.B; for(var i=0;i<B.options.length;i++) if(B.options[i].selected) A[A.options.length] = new Option(B.options[i].text, B.options[i].value); } function func(){ for(var w=0;w<A.options.length;w++) document.write(A.options[w].text); } // --> </script> <body> <form name="X"> <select size="5" multiple name="A"> </select> <input type="button" value="Copy" onClick="addItem()"> <select size="5" multiple name="B"> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </form> <form name="Y"> <input type="button" value="Submit" onClick="func()"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。早速使わせていただいてよろしいでしょうか？ 配列の大きさを小さくするというのは思いつきませんでした。本当にありがとうございました。