web-dev-qa-db-ja.com

他のセレクトボックスのオプションによって無効または有効にされたセレクトボックス

リレーション/接続beetwen 2 selectboxを作成しようとしています

<form id="creation" name="creation">
<select name="select01" id="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" id="select02">
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

Selectbox select02を開始時に無効にして、value02またはvalueをクリックすると、それが有効になり、クリックしたときにvalue01で無効にします。

今のところ私のコードjsがあります。私は他の機能(ラジオボタンでセレクトボックスを有効にする)からそれを適応させようとしますが、機能していないようです。私のリストは開始時に無効になっていますが、onclickが機能していません...

一部の体は私を助けることができますか?

var oui = document.creation.select01[0];

document.getElementById("select02").disabled=true;
oui.onclick = function() {
document.getElementById("select02").disabled=false;
}

わかりましたので、今、私はこのコードを使っています:

<script>
var oui = document.select01;
document.getElementById("select02" ).disabled=true;
oui.onchange = function(){
document.getElementById("select02" ).disabled=false;
}
</script>

Selec01の値を変更すると、select02が有効になります。しかし、select01の2つのオプションのみをターゲットにするにはどうすればよいですか?

12
Peter

これを試して:

<form id="creation" name="creation" onchange="handleSelect()">
<select name="select01" id="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" id="select02" disabled>
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

そしてJSスクリプトとして:

 function handleSelect() {
     if (this.value == '01') {
         document.getElementById('select02').disabled = true;
     } else {
         document.getElementById('select02').disabled = false;
     }
 }

そしてヒント:非常に人気のあるJSフレームワーク(jquery.com)であるjQueryを調べてください。あなたはそれを使うことで非常に簡単にあなたの仕事を達成することができます。

13
cassi.lup
​document.getElementById('select01').onchange = function () {
    document.getElementById("select02").disabled = this.value == '01';
}​​​​​​​​

これがフィドルです: http://jsfiddle.net/PK2vc/

3
Joseph Silber

onchangeの代わりにonclickを使用する必要があります。だから以下は

oui.onclick = function() 

交換された

oui.onchange = function() 

幸運を !!