ふたつの選択肢を選ぶために、プルダウンメニューがふたつ並んでいます。
例えばメニュー１の選択肢
・A
・B
・C
・D
でAを選んだとき、メニュー２の内容が
・B
・C
・D
になるようにしたいのですが、どうすればいいでしょうか？
チェックボックスで選べる数をふたつまでにする、というのも方法としてはありなんですが、今回は都合上プルダウンメニューで実装したいのです。ご教授お願いします。
投稿日時 - 2008-10-19 21:57:55
こんな感じでどうでしょう？
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>
投稿日時 - 2008-10-20 02:21:25
お礼
回答ありがとうございます。
私が考えていたものにかなり近く、無事動作確認できました。ありがとうございました。
投稿日時 - 2008-10-21 22:32:47
0人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（2件中 1～2件目)
その作業によって消してしまうと、別の選択肢を選んだときに、
復活してまた別の選択肢を消すと言う面倒な作業になります。
同じものをえらんだら、デフォルト値にもどるという程度が実装する
妥当なラインだと思いますが・・・
<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>
投稿日時 - 2008-10-19 23:24:40
お礼
回答ありがとうございます。
なるほど、同じものを選んだらデフォルト値に戻すというのもアリですね。参考にさせていただきます。
投稿日時 - 2008-10-21 22:31:34
