2つのプルダウンメニューで、同じものを選べないようにする

解決済

質問者：rusya
質問日時：2008/10/19 21:57
回答数：3件

ふたつの選択肢を選ぶために、プルダウンメニューがふたつ並んでいます。
　例えばメニュー１の選択肢
・A
・B
・C
・D
　でAを選んだとき、メニュー２の内容が
・B
・C
・D
　になるようにしたいのですが、どうすればいいでしょうか？
　チェックボックスで選べる数をふたつまでにする、というのも方法としてはありなんですが、今回は都合上プルダウンメニューで実装したいのです。ご教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#137826
回答日時：2008/10/20 02:21

こんな感じでどうでしょう？

1つ目の選択肢を選んだら、
・2つ目の選択肢を一度全部消す
・1つ目で選ばれたものを除いて、2つ目の選択肢を追加する
というやり方です。

---

<html>
<head>
<script type="text/javascript">

var defaultOptions = [
{'value':'a', 'txt':'A', 'selected':true}, //<option value='a' selected="selected">A</option>
{'value':'b', 'txt':'B'},
{'value':'c', 'txt':'C'},
{'value':'d', 'txt':'D'}
];

window.onload = function() {

var s0 = document.getElementById('s0');
var s1 = document.getElementById('s1');
appendOptions(s0);
appendOptions(s1, s0.selectedIndex);

s0.onchange = function() {
var s1 = document.getElementById('s1');
removeOptions(s1)
appendOptions(s1, this.selectedIndex)
}

function appendOptions(sel) {
for (var i = 0, n = defaultOptions.length; i < n; i++) {
if (i == arguments[1]) continue;
var op = document.createElement('option');
op.value = defaultOptions[i].value;
op.innerHTML = defaultOptions[i].txt;
if (defaultOptions[i].selected) op.selected = 'selected';
sel.appendChild(op);
}
}

function removeOptions(sel) {
while (sel.getElementsByTagName('option').length) {
sel.removeChild(sel.getElementsByTagName('option')[0]);
}
}

}

</script>
</head>
<body>
<form>
<select id="s0"></select>
<select id="s1"></select>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
私が考えていたものにかなり近く、無事動作確認できました。ありがとうございました。

通報する

お礼日時：2008/10/21 22:32

No.3

回答者： toboy88
回答日時：2008/10/20 10:57

use AJAX

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
ajaxは以前一度触ったことがあるので、これを機に見直してみようと思います。

通報する

お礼日時：2008/10/21 22:33

No.1

回答者： yambejp
回答日時：2008/10/19 23:24

その作業によって消してしまうと、別の選択肢を選んだときに、

復活してまた別の選択肢を消すと言う面倒な作業になります。
同じものをえらんだら、デフォルト値にもどるという程度が実装する
妥当なラインだと思いますが・・・

<script>
function check(obj){
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i]!=obj && f[i].value==obj.value && obj.value!=""){
obj.selectedIndex=0;
break;
}
}
}
</script>
<form>
<p>
<select name="s1" onChange="check(this)">
<option value="">選択して</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="s2" onChange="check(this)">
<option value="">選択して</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</p>
</form>