■ 選択順を左から固定にして、左のセレクトボックスが常に優先にするケース
<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は勉強中で、パッと見てスグには間違い箇所が解らないのですが、解析しながら修正したいと思います。 本当にありがとうございました。