- 締切済み
複数の連動する同じ内容のセレクトボックスについて
こんばんわ。 よろしくお願いします。 複数の同じ内容のセレクトボックスが連動するモノを作りたいのですが、まったく解りません。 たとえば 初期値を『選択しない』とし、１～５までの値を選択出来るセレクトボックスが５つあるとします。 １つ目のセレクトボックスで『３』を選択したら、残りのセレクトボックスでは３を除いた１～５までの値を選択出来ます。 さらに２つ目のセレクトボックスで『２』を選択したら、残りのセレクトボックスでは２と３を除いた１～５までの値を選択出来きるといった、全てのセレクトボックスが連動した重複を許さないセレクトボックスを作りたいのですが、可能でしょうか？
- newface_08
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- arexis
- ベストアンサー率66% (66/99)
■ 選択順を左から固定にして、左のセレクトボックスが常に優先にするケース <html> <style type="text/css"> select { width: 100px; } </style> <script type="text/javascript"> window.onload = function(){ Otext = ['選択しない',1,2,3,4,5]; //表示テキスト 0～ Olist = []; for(var i=0; i<6; i++){ Olist[i] = document.createElement('option'); Olist[i].innerHTML = Otext[i]; Olist[i].value = i; Olist[i].used = 0; } setOpt(1); for(var i=1; i<6; i++){ document.getElementById('s'+i).num = i; document.getElementById('s'+i).cur = 0; document.getElementById('s'+i).onchange = function(){ resOpt(this.num); this.cur = this.value; Olist[this.value].used = 1; setOpt(this.num+1); } } } /*とりあえず関数分けときます*/ function setOpt(start){ for(var i=start; i<6; i++) { document.getElementById('s'+ i).innerHTML = ''; for(var k=0; k<6; k++){ if(k > 0 && Olist[k].used){ continue; } var opt = Olist[k].cloneNode(true); document.getElementById('s'+ i).appendChild(opt); } } } function resOpt(start){ for(var i=start; i<6; i++){ Olist[document.getElementById('s'+ i).cur].used = 0; document.getElementById('s'+ i).cur = 0; } } </script> <title></title> </head> <body> <select id="s1"></select> <select id="s2"></select> <select id="s3"></select> <select id="s4"></select> <select id="s5"></select> </body> </html> ■どこからでも選べるタイプ。 選択しないを選ぶと候補も戻ります。 <html> <style type="text/css"> select { width:100px;} </style> <script type="text/javascript"> window.onload = function() { document.getElementById('selectform').onreset = resetOpt; resetOpt(); } function resetOpt(){ Otext = ['選択しない',1,2,3,4,5]; Olist = []; for(var i=0; i<6; i++){ Olist[i] = document.createElement('option'); Olist[i].innerHTML = Otext[i]; Olist[i].value = i; Olist[i].used = 0; } setOpt(1); for(var i=1; i<6; i++){ document.getElementById('s'+i).num = i; document.getElementById('s'+i).cur = 0; document.getElementById('s'+i).onchange = function(){ //resOpt(this) Olist[this.cur].used = 0; this.cur = this.value; Olist[this.value].used = 1; setOpt(this) } } } /*とりあえず関数分けときます*/ function setOpt(o){ for(var i=1; i<6; i++) { if(i == o.num) continue; document.getElementById('s'+ i).innerHTML = ''; for(var k=0; k<6; k++){ if(k != 0 && ( (Olist[k].used && k != document.getElementById('s'+ i).cur ) || k == o.cur ) ){ continue; } var opt = Olist[k].cloneNode(true); if(k == document.getElementById('s'+ i).cur){ opt.selected = true; } document.getElementById('s'+ i).appendChild(opt); } } } </script> <title></title> </head> <body> <form id="selectform"> <select name="s1" id="s1"></select> <select name="s2" id="s2"></select> <select name="s3" id="s3"></select> <select name="s4" id="s4"></select> <select name="s5" id="s5"></select> <input type="reset"> </form> </body> </html> 多分順番選択なのでしょうから、どちらも表示が数字のみで良い場合は Otext = ['選択しない',1,2,3,4,5]; を削除して Olist[i].innerHTML = Otext[i]; を Olist[i].innerHTML = (i==0) ? '選択しない' : i; に変えた方が、自分で番号いれこまなくて済みます。 なんかごちゃごちゃしてfor文だらけなので、 もっとスマートな回答があれば、そっちを使ってください。
関連するQ&A
- 複数の連動するセレクトボックスについて。
こんにちは。 以前もこちらでPHP＋mysqlについて質問させていただきました。 今、複数（3つ）の連動するセレクトボックスを作成しているのですが、一つ目と2つ目は正常にDBから値を読み込んできて、各セレクトボックスが連動することが可能となりましたが、3つ目のセレクトボックスの 初期値の値が、2つ目のセレクトボックスの値をDBへ問い合わせて変えない限り、そのまま残ってしまいます。どうすれば3つのセレクトボックスが連動するように解決するのでしょうか？？ よろしくお願いいたします。
- ベストアンサー
- PHP
- セレクトボックスの内容を連動
2つのセレクトボックスの内容を連動させて表示を変えたいと思っているんですが、これってJavascriptですか？ 一つ目の内容の選択に応じて変更したいです。
- ベストアンサー
- JavaScript
- 連動させたいセレクトボックスについて。
こんにちは。DB＋PHPが初心者のものです。 前にもここで質問させていただきましたが、 自分なりにコードを書いてみたので コードの訂正、ご教授をよろしくお願いいたします。 セレクトボックス1には、[table 1]の、種類が入り れレクトボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるようにする。 下記のようにソースを書いてみましたが、 table１の値は、セレクトボックスでちゃんと表示されますが、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
- 複数リストボックスの連動について
複数リストボックスの連動についてお聞きします。 エクセル2003、VBAのユーザーフォームのリストボックスになります。 VBAに関わらずプログラミング全般初心者で恐縮ですが よろしくご指導ください。 毎月の明細から 地域を分類軸に、そこに含まれる支店を、地域をまたいで複数選択ができるリストボックスの作成をしたいと考えてます。 ListBox1（地域）,ListBox2（支店）に値を重複無しに、組み合わせを表示させるまではできたのですが、 ListBox1（地域）の選択を解除した後に、再び選択すると、 ListBox2（支店）の値が重複して表示されてしまいます。 ネットで知恵を探したのですが、 ListBox1のクリックイベント時に、ListBox2の値を消す しか見つからず、自分の課題がどうしても解決できません。 どのような方向性で考えれば、解決できるのか教示いただきたいです。 自分としては、ListBox1の選択を解除したときに、 対応するListBox2が消えればと考えましたが・・・全くうまくいきません。 もし、自分の考えが的外れでしたら、正しい考え方をお教えいただきたいです。 考えが妥当であれば、どういう記述をすべきなのか、 教授願いたいです。 よろしくお願いします。
- 締切済み
- オフィス系ソフト
- AJAXでPHPの配列を用いたセレクトボックスの連動
AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、 PHPで配列をセットしセレクトボックスを生成します。 1番目のセレクトボックスで1番目の項目を選択すると 2番目のセレクトボックスの内容が連動して変化する。 といった動きを目指しています。 2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。 1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。 教えて下さい。
- ベストアンサー
- AJAX
- セレクトしたときに全て初期状態に戻ってしまいます。
こんにちは。 先日、こちらでご教授いただいた者です。 調べたのですが、その部分についてのいい方法が見つからなかったので、新たに質問させていただきました。 同一ページにテキストフォームと、 3つのセレクトボックスがあり、 その3つのセレクトボックスのうち、2つは連動しますが、残り一つは連動しないようにしたいのですが。 現状は、2つの連動するセレクトボックスを選ぶと 全てが初期状態（未選択の状態）になってしまいます。こちらでご教授いただいた方法を使い、 連動する部分で、onChangeイベントを使っています。 また連動する部分で、一つ目の選択肢を選んだときに、一度mysqlへ問い合わせ、2つ目の項目をmysqlからもってきて表示しています。 連動するセレクトボックスの操作をしたときに 他のテキストフォームや、セレクトボックスが初期状態に戻らないようにするには、どのように改良すればよろしいでしょうか？どうかご教授くださいませ。 よろしくお願いいたします。 WinXP mysql4.0 php4.2 Apache1.3
- ベストアンサー
- PHP
- セレクトボックスの連動
セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0～複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜
- ベストアンサー
- JavaScript
- セレクトボックスの連動処理について
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はまだ触り始めの為、初心者です。
- ベストアンサー
- JavaScript
- セレクトボックスの連動について
https://secure.sakura.ad.jp/member/password.php こちらのページにあるように「都道府県」を選択すると 一度リロードされ、選択された「都道府県」に基づく 「市区町村」のセレクトボックスが表示されるようになります。 おそらく、セレクトボックスに「onchange」イベントハンドラを つけて、処理しているかと思いますが、具体的な方法が 分かりません。 どなたか分かる方、教えて頂けますでしょうか？
- ベストアンサー
- HTML
- ２つのセレクトボックスを連動させたい
２つのセレクトボックスを連動させて、 片方の選択を変更すると、もう一方の選択できる範囲が限定されるようにしたい。 下記のようなソースでセレクトボックスを2つ表示させています。 jQueryを使用しています。 それぞれ「開始年」「終了年」という意味合いで、 取得する値から、「年の範囲」を決定するものです。「option」の「value」には、西暦の4桁の数字が入るようにしています。 そこで、「開始年」選択を変更させたときに、「終了年」のセレクトが開始年よりも古い年を選択できないように連動させたいのですが、何かいい方法はないでしょうか。 ※「送信」ボタンをクリックした際に、警告文を表示するのではなく、 ２つのセレクトを連動される形で実現させたいと考えております。 ↓↓【記述コード】---------------------------------------------- 開始年：<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>
- 締切済み
- JavaScript
お礼
>■どこからでも選べるタイプ。 >選択しないを選ぶと候補も戻ります。 が、まさにやりたかった事だとは思いますが、早速実行してみた所… セレクトボックスに値が入っていませんでした。 まだjavascriptは勉強中で、パッと見てスグには間違い箇所が解らないのですが、解析しながら修正したいと思います。 本当にありがとうございました。