• ベストアンサー

セレクトボックスの内容を連動

2つのセレクトボックスの内容を連動させて表示を変えたいと思っているんですが、これってJavascriptですか? 一つ目の内容の選択に応じて変更したいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

過去にも何回かそういう内容の質問がありましたが、 一例として参考URLを参考にしてみてはどうでしょう

参考URL:
http://okwave.jp/kotaeru.php3?q=1469713

関連するQ&A

  • 複数の連動する同じ内容のセレクトボックスについて

    こんばんわ。 よろしくお願いします。 複数の同じ内容のセレクトボックスが連動するモノを作りたいのですが、まったく解りません。 たとえば 初期値を『選択しない』とし、1~5までの値を選択出来るセレクトボックスが5つあるとします。 1つ目のセレクトボックスで『3』を選択したら、残りのセレクトボックスでは3を除いた1~5までの値を選択出来ます。 さらに2つ目のセレクトボックスで『2』を選択したら、残りのセレクトボックスでは2と3を除いた1~5までの値を選択出来きるといった、全てのセレクトボックスが連動した重複を許さないセレクトボックスを作りたいのですが、可能でしょうか?

  • 2つのセレクトボックスを連動させたい

    2つのセレクトボックスを連動させて、 片方の選択を変更すると、もう一方の選択できる範囲が限定されるようにしたい。 下記のようなソースでセレクトボックスを2つ表示させています。 jQueryを使用しています。 それぞれ「開始年」「終了年」という意味合いで、 取得する値から、「年の範囲」を決定するものです。「option」の「value」には、西暦の4桁の数字が入るようにしています。 そこで、「開始年」選択を変更させたときに、「終了年」のセレクトが開始年よりも古い年を選択できないように連動させたいのですが、何かいい方法はないでしょうか。 ※「送信」ボタンをクリックした際に、警告文を表示するのではなく、 2つのセレクトを連動される形で実現させたいと考えております。 ↓↓【記述コード】---------------------------------------------- 開始年:<select name="year_start" id="feas_1_1"></select> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = init_year; i <= year; i++) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_1').append('<option value="' + i + '">' + era + s +'年( '+ i+ '年)</option>'); } </script> 終了年:<select name="year_end" id="feas_1_2"></select> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = year; i >= init_year; i--) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_2').append('<option value="' + i + '">' + era + s +'年( '+ i + '年)</option>'); } </script>

  • AJAXでPHPの配列を用いたセレクトボックスの連動

    AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、 PHPで配列をセットしセレクトボックスを生成します。 1番目のセレクトボックスで1番目の項目を選択すると 2番目のセレクトボックスの内容が連動して変化する。 といった動きを目指しています。 2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。 1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。 教えて下さい。

    • ベストアンサー
    • AJAX
  • 複数の連動するセレクトボックスについて。

    こんにちは。 以前もこちらでPHP+mysqlについて質問させていただきました。 今、複数(3つ)の連動するセレクトボックスを作成しているのですが、一つ目と2つ目は正常にDBから値を読み込んできて、各セレクトボックスが連動することが可能となりましたが、3つ目のセレクトボックスの 初期値の値が、2つ目のセレクトボックスの値をDBへ問い合わせて変えない限り、そのまま残ってしまいます。どうすれば3つのセレクトボックスが連動するように解決するのでしょうか?? よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • 連動させたいセレクトボックスについて。

    こんにちは。DB+PHPが初心者のものです。 前にもここで質問させていただきましたが、 自分なりにコードを書いてみたので コードの訂正、ご教授をよろしくお願いいたします。 セレクトボックス1には、[table 1]の、種類が入り れレクトボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるようにする。 下記のようにソースを書いてみましたが、 table1の値は、セレクトボックスでちゃんと表示されますが、table2はセレクトボックスは表示されるものの、何も値がありません(T_T) 動きとしては、table1のセレクトボックスで選択したら、その項目をDBへ問い合わせ、その項目に対応した、DBに登録されているtable2の値を二つ目のセレクトボックスに表示させたいです。 <html> <body> <select name="mkoumoku"> <option selected>-------------</option> <?php //DB接続 $dbcon=mysql_connect("localhost","abcd","defg"); //DB選択 mysql_select_db("zozozo"); //table1を取得 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { echo "<option value=\"".$rows['id']."\">".$rows['kind']."\n"; } echo "</select>"; ?> <select name="skoumoku"> <option selected>-------------</option> <? //table1に連動して項目を変えたいところのコード $res1=mysql_query("select * from table2 where key =$_POST[mkoumoku] order by id"); while ($rows=mysql_fetch_array($res1)) { echo "<option value=\"".$rows['id']."\">".$rows['name']."\n"; } //Dbクローズ mysql_close($dbcon); ?> </body> </html>

    • ベストアンサー
    • PHP
  • セレクトボックスの内容をリストで出したい

    セレクトボックスをクリックしたりすると セレクトボックスの内容が ぱっと下方へ延びてリスト表示されますが、 あの状態をjavascriptで実現したいのです。 どう指定したらよいでしょうか。 FORCUS関数では、フォーカスが移るだけだし。。 ご存知でしたら、教えて下さい。 よろしくお願いします。

  • 連動するセレクトボックスの内容を増やしたい

    お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが3つなのですが、 7つの親と子のセレクトボックスを作りたいと思っています。 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>

  • セレクトボックスの連動について

    https://secure.sakura.ad.jp/member/password.php こちらのページにあるように「都道府県」を選択すると 一度リロードされ、選択された「都道府県」に基づく 「市区町村」のセレクトボックスが表示されるようになります。 おそらく、セレクトボックスに「onchange」イベントハンドラを つけて、処理しているかと思いますが、具体的な方法が 分かりません。 どなたか分かる方、教えて頂けますでしょうか?

    • ベストアンサー
    • HTML
  • セレクトボックスの連動処理について

    PHPに投稿すべき内容かもしれませんが、 こちらに投稿します。以下URLを参考にセレクトボックスの 連動処理を実行させています。 やりたい事は以下になります。 ・PHPにてフォーム(親-子のセレクトボックス)を記載し、 親-子を連動させる仕組を複数作成する為です。 http://www.skuare.net/test/jdependent.html こちらのページに記載されている内容で、一つの関連付けされている セレクトボックス(親-子-孫)については、連動処理する事が確認できましたが、 例えば以下のように関連付けされているセレクトボックスが2つある時に 2個目のセレクトボックスの選択や表示がされません。 <TABLE> <select name="id" id="id" class="selectable"> <option value="">-- select --</option> <option value="1" title="flowers" >Flowers</option> <option value="2" title="animals" >Animals</option> </select> <select name="id2" id="id2" class="selectable"> <option value="">-- select --</option> <option value="1" class="flowers" title="sunflower" >Sunflower</option> <option value="2" class="flowers" title="rose" >Rose</option> <option value="3" class="animals" title="dog" >Dog</option> <option value="4" class="animals" title="cat" >Cat</option> </select> </TABLE> <TABLE> <select name="id" id="id" class="selectable"> <option value="">-- select --</option> <option value="1" title="flowers" >Flowers</option> <option value="2" title="animals" >Animals</option> </select> <select name="id2" id="id2" class="selectable"> <option value="">-- select --</option> <option value="1" class="flowers" title="sunflower" >Sunflower</option> <option value="2" class="flowers" title="rose" >Rose</option> <option value="3" class="animals" title="dog" >Dog</option> <option value="4" class="animals" title="cat" >Cat</option> </select> </TABLE> おそらくスクリプト記載部分の $(document).ready(function(){ $('#id2').dependent({ parent:'id',//親のid名 group: 'selectable' }); }); #id2辺りを触る必要があるのだとは思うのですが、 同じ内容のセレクトボックスをPHPに複数記載した時に、 どのようにスクリプトを変更する必要があるかが解らず 非常に困っております。どなたか教えていただければ 幸いです。 ※JavaScriptはまだ触り始めの為、初心者です。

  • 【struts】2つのselectの連動

    struts初心者です。 2つのselectで、一つ目のselectが選択されたら、関連する内容のデータを、もう一つのselectに表示させるようにしたいです。 どうすればできるのでしょうか?javascriptとか使用するんですかね??

専門家に質問してみよう