web-dev-qa-db-ja.com

DropDownListのonChangeおよびonSelect

ユーザーにクラブに参加するかどうかを尋ねるDropDownListがあります。

_Do you want to join the club
Yes
No
_

このリストの下には、デフォルトで無効に設定されている別のリストがあります。このリストには、クラブの部門があります。このリストは、ユーザーが[はい]を選択するまで有効になりません。

次のコードを作成しましたが、解決できなかった問題は、ユーザーが[はい]を選択してから決定を変更し、再び[いいえ]を選択することです。この場合、部門のリストはまだ有効になっています。彼が再び[いいえ]を選択したときに無効にする必要があります。

_<html>
    <head>
        <script type="text/javascript">
            function disable()
            {
                document.getElementById("mySelect1").disabled=true;
            }
            function enable()
            {
                document.getElementById("mySelect1").disabled=false;
            }
        </script>
    </head>
    <body>
        <form>
            <select id="mySelect" onChange="enable();">
                <option onSelect="disable();">No</option>
                <option onSelect="enable();">Yes</option>
            </select>
            <select id="mySelect1" disabled="disabled" >
                <option>Dep1</option>
                <option>Dep2</option>
                <option>Dep3</option>
                <option>Dep4</option>
            </select>
        </form>
    </body>
</html>
_

onSelect="disable();"が問題を解決すると思ったが、まだ機能しない。

ありがとう

javascripthtmlonchange
7
Nasser

このようにしますjsFiddleの例.

JavaScript：

function check(elem) {
    document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}

HTML：

<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>

<select id="mySelect1" disabled="disabled" >
<option>Dep1</option>
<option>Dep2</option>
<option>Dep3</option>
<option>Dep4</option>
</select>
</form>
16
j08691

onchangeの後にonselectが発生し、基本的にselectを再度有効にしているに違いありません。

onlyonchangeを実装し、選択されているオプションを調べ、それに基づいて有効または無効にすることをお勧めします。

選択したオプションの値を取得するには、次を使用します。

document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value

各オプションに値を指定していないので、何も得られません.. :(

<select id="mySelect" onChange="enable();">
<option onSelect="disable();" value="no">No</option>
<option onSelect="enable();" value="yes">Yes</option>
</select>

これで、"yes"または"no"

4
Halcyon

堅牢なフォームを作成するには、便利な状態でロードし、スクリプトを使用して動作を強化します。以下では、選択がラジオボタンに置​​き換えられました（ユーザーの生活がずっと楽になります）。

「yes」オプションはデフォルトでチェックされ、選択が有効になっています。ユーザーがいずれかのラジオボタンをチェックすると、それに応じて選択が有効または無効になります。

<form onclick="this.mySelect1.disabled = this.becomeMember[1].checked;" ... >
  <input type="radio" name="becomeMember" checked>Yes<br>
  <input type="radio" name="becomeMember">No<br>

  <select id="mySelect1">
    <option>Dep1
    <option>Dep2
    <option>Dep3
    <option>Dep4
  </select>
  ...
</form>
3
RobG

シンプルで簡単：JavaScriptコード：

_function JoinedOrNot(){
    var cat = document.getElementById("mySelect");
    if(cat.value == "yes"){
        document.getElementById("mySelect1").disabled = false;
    }else{
        document.getElementById("mySelect1").disabled = true;
    }
}
_

この行に追加するだけです[onChange = "JoinedOrNot（）"]：<select id="mySelect" onchange="JoinedOrNot()">

それはうまくいきます;）

3
Yassine Sedrani

うーん。 onClick()を使用しないのはなぜですか

<select id="mySelect" onChange="enable();">
   <option onClick="disable();">No</option>
   <option onClick="enable();">Yes</option>
</select>
1
cargaraanorland