- ベストアンサー
セレクトメニューの選択項目によって、もう１つのセレクトメニューの項目と項目数を変更する
もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。 たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。
- pig1320
- お礼率80% (24/30)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
試しに作ってみました。 こういう感じでしょうか。 <html> <head> <title>test</title> <script type="text/javascript"> <!-- menu2txt = new Array(); // 2つ目のメニューの項目表示テキスト用配列 menu2val = new Array(); // 2つ目のメニューのvalue値用配列 menu2txt["a"] = new Array(); menu2val["a"] = new Array(); menu2txt["b"] = new Array(); menu2val["b"] = new Array(); menu2txt["c"] = new Array(); menu2val["c"] = new Array(); // 二次配列作成 menu2txt["a"][0] = "項目A1"; menu2val["a"][0] = "A1"; menu2txt["a"][1] = "項目A2"; menu2val["a"][1] = "A2"; menu2txt["a"][2] = "項目A3"; menu2val["a"][2] = "A3"; menu2txt["a"][3] = "項目A4"; menu2val["a"][3] = "A4"; menu2txt["a"][4] = "項目A5"; menu2val["a"][4] = "A5"; menu2txt["b"][0] = "項目B1"; menu2val["b"][0] = "B1"; menu2txt["b"][1] = "項目B2"; menu2val["b"][1] = "B2"; menu2txt["b"][2] = "項目B3"; menu2val["b"][2] = "B3"; menu2txt["c"][0] = "項目C1"; menu2val["c"][0] = "C1"; menu2txt["c"][1] = "項目C2"; menu2val["c"][1] = "C2"; menu2txt["c"][2] = "項目C3"; menu2val["c"][2] = "C3"; menu2txt["c"][3] = "項目C4"; menu2val["c"][3] = "C4"; menu2txt["c"][4] = "項目C5"; menu2val["c"][4] = "C5"; // 以上、セレクトメニューの表示項目とvalue値を配列に格納 function set_menu(){ key = document.f1.menu1.value; while (document.f1.menu2.options[0]){ document.f1.menu2.options[0] = null; // 2つ目のメニューを消去 } for (i=0; i<menu2txt[key].length; i++){ document.f1.menu2.options[i] = new Option(menu2txt[key][i],menu2val[key][i]); // 2つ目のメニューの項目を生成・表示テキストとvalue値を設定 } } window.onload = set_menu; // ページロード時にmenu1の初期値でmenu2を設定 // --> </script> </head> <body> <form action="#" name="f1"> <div> <select name="menu1" onchange="set_menu()"> <option value="a">Aタイプ</option> <option value="b">Bタイプ</option> <option value="c">Cタイプ</option> </select> <select name="menu2"> </select> </div> </form> </body> </html> 参考になれば…
その他の回答 (1)
- ryou0607
- ベストアンサー率27% (71/261)
selectのonchangeで呼び出す関数 select.length=0;//中身の初期化 select[0].value=値;//一つ目の項目の設定 select[0].text=表示文字列;//一つ目の項目の設定 select[1].value=値;//二つ目の項目の設定 select[1].text=表示文字列;//二つ目の項目の設定 こんな感じのものを作ればできますよ。
お礼
ご回答ありがとうございます。 二次配列を使うのですよね？そこまではわかるのですが、そこからがちょっと・・・。 まだまだ勉強が足りないのかもしれません・・・。
関連するQ&A
- セレクトメニューの選択項目変更で入力した値を変更する。
例 第一選択のセレクトメニューで項目Aを選択。 第二選択で項目Aの数値を取得。 第一選択のセレクトメニューで項目Bを選択。 第二選択で項目Bの数値を取得。 (第二選択はセレクトかテキスト入力の予定です) 取得した値をAもしくはBに代入。 計算式(A*2)+(2/B) もしくは 計算式a (a*2)+10 計算式b (b*2)+10 と言う風に選択項目によって代入位置を変更したいです。 計算式も代入する値も多くあるのでセレクトメニューで選択して その位置を変更したいのですが、どのようにしたらいいのでしょうか? 他に良い方法とかあるものなんでしょうか?? 初心者でサンプル例文を切り張り修正でしか作れません。(-_-;) 専門用語とか詳しく説明されても解らないと思うので、 例文だけでも書いていただいたらありがたいです。 あとはなんとか例文を参考に自分で調べて構文の仕組みを理解するのでお願いします。<(_ _)>
- ベストアンサー
- JavaScript
- セレクトメニュー選択でもう一つセレクトメニューを出す
「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 menuItem = [ ["Ａトップ","A本部","B本部","C本部"], ["Ｂトップ","1本部","2本部","3本部"], ["Ｃトップ","あ本部","い本部","う本部"], ["Ｄトップ","●本部","▲本部","◆本部"] ]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------------------- <SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)"> <OPTION selected value="0">選択してください</OPTION> <OPTION value="a-block">Aブロック</OPTION> <OPTION value="b-block">Bブロック</OPTION> <OPTION value="c-block">Cブロック</OPTION> <OPTION value="d-block">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="visibility:hidden"> <OPTION selected value="0">選択してください</OPTION> </SELECT>
- ベストアンサー
- JavaScript
- セレクトメニューセレクトメニューへのジャンプ
こんにちは。 セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、 さらにもう一つ、＋もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか？ 例えば、 セレクトメニュー(1) 選択 ↓ ジャンプ セレクトメニュー(2) 選択 ↓ ジャンプ セレクトメニュー(3) 選択 ↓ ジャンプ セレクトメニュー(4) 選択 ↓ 検索用CGI実行 クリック というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。 参考サンプル等、 どなたか情報をお持ちの方がおりましたら、 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ラジオボタンとセレクトメニューの連動が複数項目
前回の質問でフォームでラジオボタンとセレクトメニューの連動をおこなうことができましたが、これを複数項目で選択可能にしたいのですが、コードを教えて頂けませんでしょうか？ このような感じです。 用紙の種類 ◎デザインＡ ◎選択しない ◎その他｛ ｝ デザインＢ デザインＣ 色数 ◎デザインＡ ◎選択しない ◎その他｛ ｝ デザインＢ デザインＣ <m(__)m>どうか宜しくお願い致します。
- ベストアンサー
- HTML
- ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
はじめまして。質問させてください。 セレクトメニューを選択するときに たとえば、左のセレクトメニューに巨人を選択すると右の セレクトメニューには巨人の選手を選択する項目になり、 左のセレクトメニューから阪神と選ぶと、右のセレクトメニューの項目が阪神の選手の項目になるように左のセレクトメニューのと右のセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですが、（javascriptを知らない人でも項目を変更できるように） たとえば、ここのサイトのようにhttp://www.kyoto-su.ac.jp/~ushitaki/JavaScriptExample/introselect2.html 左のメニューの項目を選んだら、右の項目は左の項目にそった選択肢になるという形にしたいのです。 この場合どのようなやり方がありますでしょうか。ご教授のほどよろしくお願いいたします。 また、似たようなセレクトメニューがあるＵＲＬをご存知の方がいたら教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトメニューからもう一つのセレクトメニューを選択したか確認
「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしました。 送信前に「ブロック名」だけでなく、「部署名」も選択したかそうか確認したのですが、どうしでも出来ません。 いろいろ試しても出来なくて困っています。 ぜひ教えてください。 よろしくお願いいたします。 ---------------------------------------------------------------- menuItem =[[" "], ["(2) 部署を選択 ","あああ","いいい"], ["(2) 部署を選択 ","ううう","えええ"], ["(2) 部署を選択 ","おおお","かかか"], ["(2) 部署を選択 ","ききき","くくく"]]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------- <SELECT size="1" name="AREA" onchange="setMenuItem(this.selectedIndex)" style="color : #3d3d3d;"> <OPTION value="0" selected>(1) ブロックを選択 </OPTION> <OPTION value="Ａブロック">Ａブロック</OPTION> <OPTION value="Ｂブロック">Ｂブロック</OPTION> <OPTION value="Ｃブロック">Ｃブロック</OPTION> <OPTION value="Ｄブロック">Ｄブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="color : #3d3d3d;visibility : hidden;"> <OPTION selected value="0"></OPTION> </SELECT> ---------------------------------------------------------------- 確認用 if(document.form2.AREA.value=="0"){ alert("ブロックを選択してください"); return false; } return true; }
- 締切済み
- JavaScript
- セレクトメニューの選択項目に応じて隣接ボタンのリンクURLを変更する
セレクトメニューの選択項目に応じて、隣接したボタンのリンクURLを変更したいのですが、どのようにすればよいのでしょうか？ 例えば、デフォルトで空リンクになっているボタンのURLが、セレクトメニュー内の選択項目の「ブルー」を選択すると、「http://www.aaa.co.jp/blue」になり、「レッド」を選択するとボタンのURLが「http://www.aaa.co.jp/red」に変更させたい場合。 ---------サンプルソース---------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> </head> <body> <table width="300" border="0" cellspacing="5" cellpadding="0"> <tr> <td><label> <select name="select"> <option>カラーを選択してください</option> <option>ブルー</option> <option>レッド</option> </select> </label> </td> </tr> <tr> <td><a href="#"><img src="../img/buttom.gif" width="180" height="30" border="0"></a></td> </tr> </table> </body> </html> ---------サンプルソース---------------------------------------------- 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 複数のセレクトメニュー 項目の組み合わせでリンク
HTML 複数（４つ）のセレクトメニューで選ばれた項目の組み合わせによりそれぞれにリンクしたいです。 例： (1)色を選ぶ： 赤、青、黄、緑 (2)サイズを選ぶ： S、M、L、LL (3)形を選ぶ： 四角、丸、三角 (4)タイプを選ぶ タイプA、タイプB、タイプC ４つ全ての項目を選んだあとボタンを押すとリンク先に飛ぶ。 選んだ組み合わせが 赤 + S + 四角 + タイプA だった場合 → URL(1)へ 赤 + S + 四角 + タイプB だった場合 → URL(2)へ 赤 + S + 四角 + タイプC だった場合 → URL(3)へ ～ 緑 + ＬＬ + 丸 + タイプA だった場合 → URL100へ というような感じにしたいです。 初心者ですので伝わりづらいかもしれませんが、お分かりになる方いらっしゃいましたら教えてください。
- ベストアンサー
- JavaScript
- 複数のセレクトボックスで項目を選択でき、それらの項目を条件に、ヒットするデータを表示させたいのですが…。
Webページにて校区表を作成しています。 作りたい仕組みは下記のとおりです。 １）１番目のセレクトメニューで町名を選択 a町 b町 c町… ２）２番目のセレクトメニューは、上記の町名に当てはまる番地を表示させる。例えば、a町が選択されたときは「1,2,3,4,5」、b町が選択されたときは「1,2,3」など。 ３）更に、「b町,e町,g町」が選択された場合にのみ３番目のセレクトメニューを表示させ、「号」を選択できるようにする。 ４）そして、「検索」ボタンが押された時に、上のセレクトメニューで選択された住所に該当する「学校名」を表示させる。 住所一覧と、その住所に該当する学校名を記入したテキストファイルを用意し、セレクトボックスで選択された項目にヒットする“学校名”を表示させるようにすれば…？と思うのですが、参考になるサイトを探しても「URLを表示させる」というものがほとんどで困っています。 なにぶん、プログラミングの初心者なので、参考になるサイトがありましたら教えていただきたいと思います。 よろしくお願い致します。
- 締切済み
- JavaScript
- セレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更する場合について
アドバイスお願いします。 ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。 これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか？ 【HTML】 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JavaScript</title> <link rel="stylesheet" type="text/css" href="main.css" media="all"> <script type="text/javascript" src="main.js"></script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="">国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub">国を選択してください</select> </form> </body> </html> 【main.js】 window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [[ ],[ { text:"東京", value:"tokyo"}, { text:"大阪", value:"osaka"}, { text:"名古屋", value:"nagoya"} ],[ { text:"ニューヨーク", value:"ny"}, { text:"ロサンゼルス", value:"la"} ] ]; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value); } } } また、質問にありますようなセレクトメニューを実装する場合、JavaScriptとAJAX、どちらが適したものと言えるのでしょうか？
- ベストアンサー
- JavaScript
お礼
ありがとうございます。完璧です！ 二次配列を使うのはなんとなくわかったのですが、行き詰っていました。 本当にありがとうございました。