２つのプルダウンを連動させる
- ２つのプルダウンを連動させるコードを作成しましたが、選択を変更すると前回の選択肢が残ってしまいます。解決方法を教えてください。
- 連動するプルダウンの内容を作成する処理の直前で初期化処理を追加しましたが、問題は解決しませんでした。
- 他の解決方法はありますか？
- ベストアンサー
２つのプルダウンを連動させる
２つプルダウンがあったとき片方で選択した内容に応じもう一方のプルダウンの内容が 変更されるように以下のようなコードを書いてみました。 しかし、これだと1番目のプルダウンでAを選択した後、Bを選択しなおすと 2番目のプルダウンの選択肢には前回Aを選んだ時に表示されていた内容が 残ってしまいます。そこで 連動するプルダウンの内容を作成する処理（Forループの処理）の直前で for (i=0; i<itemNum; i++) { document.myForm.tableName.options[i] = new Option(null, null); } という初期化処理を書いてみたのですが結果は同じでした。 解決するための何か良い方法はございますでしょうか。 <html> <head> <title>プルダウン連動サンプル</title> <script type="text/javascript"> table_name = [["10", "9", "8", "7", "6"], ["りんご", "メロン", "バナナ"], ["嵐"]]; function setMenuItem(n) { itemNum = table_name[n].length; // 項目数 //連動するプルダウンの内容を作成 for (i=0; i<itemNum; i++) { alert(table_name[n][i]); document.myForm.tableName.options[i] = new Option(table_name[n][i], table_name[n][i]); } //プルダウンの先頭を選択 document.myForm.tableName.options[0].selected = true; } </script> </head> <body onLoad="setMenuItem(0)"> <form name="myForm"> <select name="database" onChange="setMenuItem(this.selectedIndex)"> <option selected>A</option> <option>B</option> <option>C</option> </select> <select name="tableName"> </select> </form> </body> </html>
- unko347
- お礼率44% (121/273)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
document.myForm.tableName.options.length=0;
関連するQ&A
- セレクトメニューの連動、そしてページへのリンク
[セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC] …というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、 (たとえば、Cのセレクトメニューには Yahoo Google Excite のようなのがあり、それらを選択すると、) あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか？ ネット上を探し回って、自分で組み立てて作ってみましたが、 <!-- menu = [ ["A","B","C","D"], ["E","F","G"], ["H"] ]; function setMenu(n) { len = document.myForm.sb.options.length; for (i=len-1; i>=0; i--) { document.myForm.sb.options[i] = null; } for (i=0; i<menu[n].length; i++) { document.myForm.sb.options[i] = new Option(menu[n][i],menu[n][i]); } } menuItem = [ ["Z"], ["Y","X","W","V"], ["U","T","S","R"] ]; function setMenuItem(a) { len = document.myForm.s.options.length; for (c=len-1; c>=0; c--) { document.myForm.s.options[c] = null; } for (c=0; c<menuItem[a].length; c++) { document.myForm.s.options[c] = new Option(menuItem[a][c],menuItem[a][c]); } } // --> ───────────────── <form name="myForm"> <select name="a" onchange="setMenu(this.selectedIndex)"> <option checked selected>セレクトA</option> <option value="A">A</option> <option value="E">E</option> <option value="H">H</option> </select> > <select name="sb" onchange="setMenuItem(this.selectedIndex)"> <option selected> </option> </select> > <select name="s" onChange="popJump(this)"> <option selected > </option> </select> </form> …と、３つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。 このプログラムにどのような修正を加えればよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 2つのプルダウンを連動させて、selectedで選択状態にしたい
JavaScript初心者です。 今、phpとMySQLとJavaScriptで車の情報を登録する画面を作っています。 1つのプルダウンが選択後、もうひとつのプルダウンを表示するのですが、 入力画面から確認画面へ移って、history.backでもう一度入力画面にもどったときに、 選択された状態で表示したいのです。 下記のmakerは、値をセッションで受け取り、selectedをつける指示を したので、 選択状態にすることができました。 もう一つのcarnameがどうしたらよいか分かりません。 どうかご教授お願い致します。 <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; carnameItem = [ //トヨタ ['カローラ','クラウン','セルシオ'], //ニッサン ['シーマ','エルグランド','ローレル'], len = document.form1.carname.options.length; for (i=len-1; i>0; --i)document.form1.carname.options[i] = null; if(n!=0){ document.form1.carname.style.visibility = "visible"; for (i=0; i<carnameItem[n-1].length; i++)document.form1.carname.options[i+1] = new Option(carnameItem[n-1][i]); } setPref(0); } //--> </script> </head> <body> <form name="form1"> <select name="maker" onChange="setArea(this.selectedIndex)"> <option value="0"<?php echo $selected1?>>▼選択してください</option> <option value="1"<?php echo $selected1?>>トヨタ</option> <option value="2"<?php echo $selected2?>>ニッサン</option> </select> <select name="carname" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> </form>
- 締切済み
- 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
- 複数のプルダウン
いつも参考にしております。 プルダウンが選択後、もうひとつのプルダウンを表示したいと 思っておりますが、うまく表示されません。 1つめのプルダウンの選択によって、2つめのプルダウンのメニューは 異なります。 <!-- function setArea(n) { prefItem = [["▼選択してください"], ["▼選択してください", "千葉県", "東京都", "神奈川県", "山梨県"], ["▼選択してください", "新潟県", "長野県", "富山県"], ["▼選択してください", "静岡県", "愛知県", "岐阜県", "三重県"], len = document.form1.PrefID.options.length; for (i=0; i<len; i++) { document.form1.PrefID.options[i] = null; } document.form1.PrefID.style.visibility = "visible"; for (i=0; i<prefItem[n].length; i++) { document.form1.PrefID.options[i] = new Option(prefItem[n][i]); } } //--> <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" style="visibility:hidden"> たとえば、1つめのプルダウンを「関東」を選択すると 2つめのプルダウンに「千葉県, 東京都, 神奈川県, 山梨県」 と表示されますが、その後「▼選択してください」を選択すると 「▼選択してください, 神奈川県」と2つのメニューが表示されてしまいます。 メニューを削除して、新しく生成しています。 なので、「▼選択してください」と1つだけのメニューになるはずだと思うのですが。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- ２つのプルダウンメニューを連動させてリンク先へ遷移
２つのプルダウンメニューを連動させて、 ひとつ目のプルダウンメニュー内の条件にそれぞれ連動させた選択肢をふたつ目のプルダウンメニューで表示させ、 ふたつのプルダウンで選んだ項目に連動したリンク先へジャンプさせたいと考えております。 下記のソースで試した所、IE6ではOKでしたがFireFox、Safariでは ダメでした。（プルダウンじたいが表示されない） IE6と7、FireFox2と3、MacのSafari3で表示できるようにしたいので教えてください。 ちなみに私はHTMLレベルのスキルしかありませんのでできるだけ具体的に教えて頂けると助かります。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テスト</title> </head> <body> ↓ここにプルダウンが入る<br> <script type="text/javascript"> var printf = document.write; RightListStr = ["選択してください","条件A","条件B"]; LeftListStr = [["選択してください","",""],["選択してください","条件A-1","条件A-2"],["選択してください","条件B-1","条件B-2"]]; URL = [["","",""],["","http://条件A-1リンク先.com","http://条件A-2リンク先.jp"],["","http://条件B-1リンク先.com","http://条件B-1リンク先.jp"]]; printf('<form name="MyForm"><select name="RightList" onChange="ChangeList(this);">'); for(var i = 0; i < RightListStr.length; i++) printf('<option>' + RightListStr[i]); printf('</select> <select name="LeftList" onChange="MoveURL(this)">'); for(var i = 0; i < LeftListStr[0].length; i++) printf('<option>' + LeftListStr[0][i]); pritnf('</select></form>'); function MoveURL(LeftObject){ var RightObject = document.MyForm.RightList location.href = URL[RightObject.selectedIndex][LeftObject.selectedIndex]; return; } function ChangeList(RightObject) { var LeftObject = document.MyForm.LeftList; for(var i = 0; i < LeftListStr[RightObject.selectedIndex].length; i++) LeftObject.options[i].text = LeftListStr[RightObject.selectedIndex][i]; return; } </script> </body> </html>
- 締切済み
- JavaScript
- FORMデータを配列としてそうしんしたいのですが・・・
JavaScriptでセレクトボックス内の値が変化したらもう一つあるセレクトリスト内の値が変更されるように組みました。 以下コード。 ----------------------- <HTML> <head> <script type="text/JavaScript"> <!-- menuItem = [["A","B","C","D","E"], ["1","2","3"], ["あ","い","う","え","お","か"]]; function setMenuItem(n) { len = document.myForm.works.options.length; for (i=len-1; i>=0; i--) { document.myForm.works.options[i] = null; } for(i=0; i<menuItem[n].length; i++) { document.myForm.works.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } } //--> </script> </head> <body> <FORM name = "myForm"> <SELECT name="list" onChange="setMenuItem(this.selectedIndex)"> <option value="list1">リスト１ <option value="list2">リスト２ <option value="list3">リスト３ </SELECT> <SELECT name="works[]" MULTIPLE> <OPTION>A <OPTION>B <OPTION>C <OPTION>D <OPTION>E </SELECT> </FORM> </BODY> </HTML> ----------------------- でセレクトリスト内のデータを配列として送信したいのですがうまくいきません。 セレクトリストのnameはworks[]にしたら動作すらしなくなりました。 どなたかご教授願います。
- ベストアンサー
- JavaScript
- プルダウンを連動した際のPOST処理に関して
プルダウンを連動した際のPOST処理に関して 初歩的な事で申し訳ありませんが、教えて下さい。 今現在、過去にも質問として登録されていた下記のソースに対し、自身で修正を加えて 記述をしております。 その中で、以下の連動したものの中で、プルダウンより選ばれたものをボタンで別ページ へPOSTしたいと考えております。 下の記述の場合、from の POST へは、既に自分を再読込みという記述がされていて、 ボタンを作成し、POST で飛ばす事ができません。。。 したの登録ボタンで別画面へ遷移するにはどのような方法があるでしょうか。。。 教えて下さい。 《内容》 <?php //DB接続 $dbcon=mysql_connect("localhost","abcd","defg"); //DB選択 mysql_select_db("zozozo"); ?> <html> <body> <form method="post" name="frm" action="a.php"> <select name="mkoumoku" onChange="submit()"> <?php $slctd = ((!isset($_POST['mkoumoku']) Or $_POST['mkoumoku'] == "none")?" selected":""); echo '<option value="none"'.$slctd.'>-------------</option>'."\n"; //table1を取得 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { $slctd = (($_POST['mkoumoku'] == $rows['id'])?" selected":""); echo '<option value="'.$rows['id'].'"'.$slctd.'>'.$rows['kind'].'</option>'."\n"; } echo "</select>"; ?> <select name="skoumoku"> <option value="none" selected>-------------</option> <?php //table1に連動して項目を変えたいところのコード $res1=mysql_query("select * from table2 where table2.key='{$_POST['mkoumoku']}' order by id"); while ($rows=mysql_fetch_array($res1)) { echo '<option value="'.$rows['id'].'">'.$rows['name'].'</option>'."\n"; } echo "</select>"; //Dbクローズ mysql_close($dbcon); ?> <input type="submit" value="登録"> </form> </body> </html>
- ベストアンサー
- JavaScript
- メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法
メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法 ２つのコンボがります。 1個目は、メーカーを選択します。 ２個目は、機種を選択します。 下記ソースでは、valueの値が取得でいないようです。 （例） makerでドコモを選択したらvalueに１をセット sendwayでドコモ機種(2)を選択したらvalueに２をセット このようなことを実現したいのですが．．． よろしくお願いします。 <script language="JavaScript"><!-- menuItem = [["ドコモ機種(1)","ドコモ機種(2)"]["ドコモ以外機種"]]; function setMenuItem(n) { len = document.myForm.sendway.options.length; for (i=len-1; i>=0; i--) { document.myForm.sendway.options[i] = null; } for (i=0; i<menuItem[n].length; i++) { document.myForm.sendway.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } // --></script> <select name="maker" onChange="setMenuItem(this.selectedIndex)"> <option value="1" <?= $val?>>ドコモ</option> <option value="2" <?= $val?>>ドコモ以外</option> </select> <select name="sendway" > <option value="1" <?= $val?>>ドコモ機種(1)</option> <option value="2" <?= $val?>>ドコモ機種(2)</option> <option value="3" <?= $val?>>ドコモ以外機種</option> </select>
- ベストアンサー
- JavaScript
- プルダウン連動とリンク
選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 http://d.hatena.ne.jp/Mars/20071109 連動リンクはこちらを参考にしました。 http://air.rulez.jp/shop/java/jt_pulldown.htm 現在のソースは下記のようになっています。 プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。 最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。 現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。 ----------------------------------------------------------------- <script type="text/javascript" src="ConnectedSelect.js"></script> <form> <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2" onChange="top.location.href=value"> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="http://www.yahoo.co.jp/">yahoo</option> <option value="https://www.google.co.jp/">google</option> </optgroup> </select> </form> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか？ また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- 締切済み
- JavaScript
- ２つのプルダウンボックスの連動について
<SELECT><OPTION></OPTION></SELECT>タグで作るプルダウンボックスについて質問です。 ＡとＢの二つのプルダウンボックスを設置し、Ａで選択された項目に合わせて、Ｂの表示項目を変更させたいと思っています。 この２つのプルダウンボックスを連動させる方法について、ＪＡＶＡスクリプトを使った方法を知りましたが、利用者がブラウザでＪＡＶＡを切っていた場合は正常に機能しないのでしょうか？ 利用者がブラウザでＪＡＶＡを切っていた場合にも対応できる連動の方法があればぜひ教えてください。
- ベストアンサー
- HTML
お礼
ご指摘の方法で解決いたしました。ありがとうございました。