- 締切済み
複数の連動する同じ内容のセレクトボックスについて
こんばんわ。 よろしくお願いします。 複数の同じ内容のセレクトボックスが連動するモノを作りたいのですが、まったく解りません。 たとえば 初期値を『選択しない』とし、１～５までの値を選択出来るセレクトボックスが５つあるとします。 １つ目のセレクトボックスで『３』を選択したら、残りのセレクトボックスでは３を除いた１～５までの値を選択出来ます。 さらに２つ目のセレクトボックスで『２』を選択したら、残りのセレクトボックスでは２と３を除いた１～５までの値を選択出来きるといった、全てのセレクトボックスが連動した重複を許さないセレクトボックスを作りたいのですが、可能でしょうか？
- 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文だらけなので、 もっとスマートな回答があれば、そっちを使ってください。
お礼
>■どこからでも選べるタイプ。 >選択しないを選ぶと候補も戻ります。 が、まさにやりたかった事だとは思いますが、早速実行してみた所… セレクトボックスに値が入っていませんでした。 まだjavascriptは勉強中で、パッと見てスグには間違い箇所が解らないのですが、解析しながら修正したいと思います。 本当にありがとうございました。