セレクトボックスで警告

質問

Javascriptの初心者です。
セレクトボックスが二つ(a,b)あるとして、
セレクトボックスa中の項目いずれかを選択肢すると、
セレクトボックスbのどの項目をも選択できないようにするため、
警告をだしたいのですが、
よい方法をご教授していただけなでしょうか。
よろしくお願いいたします。

回答No.3

yambejp

こうするとどうでしょうか？

<script language=javascript>
function disableSelect(obj,sel){
if(typeof sel=="string") patern=sel;
else patern="["+sel.join("|")+"]";
patern="^"+patern+"$";
var f=obj.form;
var v=obj.value;
for(var i =0 ;i<f.length;i++){
if(f[i].type=="select-one"){
if(f[i].name.match(patern) && v!=""){
f[i].disabled=true;
}else{
f[i].disabled=false;
}
}
}
}
</script>

<form>
<!--aを選択すると配列で指定したbとcが使えない-->
<select name="a" onChange="disableSelect(this,Array('b','c'))">
<option value="">選択して</option>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
</select>
<!--bを選択すると配列で指定したcが使えない-->
<select name="b" onChange="disableSelect(this,Array('c'))">
<option value="">選択して</option>
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="b3">b3</option>
</select>
<!--cを選択するとbが使えない(配列でなくてもいい)-->
<select name="c" onChange="disableSelect(this,'b')">
<option value="">選択して</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
<!--dは指定されてないので常に放置-->
<select name="d">
<option value="">選択して</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
</select>
</form>

補足

再度回答ありがとうございます。
しかし、どうしてか
上記を組み込むと、
onChange="disableSelect(this,'b')">
は成功しますが、他のものはできませんでした。
セレクトボックスの数は関係あるのでしょうか。
現在の状態はセレクトボックスが６つ（a～f）あり、
a中のa2～a6までを選択すると、b～fまでを選択できなくなり、
a1を選択するとまたb～fは選択できるようにしたいのです。
また、各セレクトボックスにはonChange="keisan()"として、
数量の合算、百の位繰り上げ、3桁ごとにカンマをつける
formが組み込まれております。
<select name="a" onChange="keisan()"　onChange="disableSelect(this,Array('b','c'))">
などというように、二つは一緒に動作できないようなのです。
お手数かけますが、どなたかよろしくお願いいたします。

回答No.2

yambejp

こんな感じでしょか。

<script language=javascript>
function disableSelect(obj){
var f=obj.form;
var v=obj.value;
for(var i =0 ;i<f.length;i++){
if(f[i].type=="select-one"){
if(f[i]!=obj && v!=""){
f[i].disabled=true;
}else{
f[i].disabled=false;
}
}
}
}
</script>

<form>
<select name="a" onChange="disableSelect(this)">
<option value="">選択して</option>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
</select>
<select name="b" onChange="disableSelect(this)">
<option value="">選択して</option>
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="b3">b3</option>
</select>
<select name="c" onChange="disableSelect(this)">
<option value="">選択して</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
</form>

補足

早速の回答、ありがとうございます。しかし、これではa欄を選択した場合、b欄もc欄も選択できないようになってしまいます。a欄を選択した場合、b欄は選択できないが、c欄は選択できるままにしたいと考えています。何か良い方法はございませんでしょうか。よろしくお願いいたします。
ちなみに、現在a～c欄に相当するセレクトボックスには、項目を選択
すると、金額は別のテキストボックスに表示されて、合算が算出
されるように設定しておりますので、
<SELECT NAME="hardware1" onChange="keisan()">となっております。
この箇所を
<SELECT NAME="hardware1" onChange="keisan（)"
onChange="disableSelect(this)">
として大丈夫ということでしょうか。
ところで、
<script language=javascript>
｜
｜
</script>
までを理解できていないで補足をさせていただいています。
これはC言語を勉強しなければならないのでしょうか。
あわせて、よろしくお願いいたします。

回答No.1

noname#39970

disabled 属性を使って編集不可にする　　・・・とか
とりあえず変更を検知するのは　onChange

http://www.tohoho-web.com/js/onevent.htm#onChange