Question

我有一个DropDownList，询问用户是否想加入俱乐部：

Do you want to join the club
Yes
No

在此列表下，有另一个列表默认设置为禁用。这个名单有俱乐部的部门。在用户选择“是”之前，不会启用此列表。

我构建了以下代码但是我无法解决的问题是让我们假设用户选择是，然后他改变了他的决定，所以他将再次选择No。在这种情况下，部门列表仍然启用。当他再次选择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();"可以解决问题但它仍然不起作用。

由于

Answer 1

我会这样做 jsFiddle example 。

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>

Answer 2

我打赌在onchange之后onselect被解雇了，基本上重新启用了选择。

我建议你只实施 onchange，检查选择了哪个选项，然后根据它启用或禁用。

要获取所选选项的值，请使用：

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"

Answer 3

要创建健壮的表单，请将其加载到有用状态并使用脚本来增强其行为。在下文中，选择已被单选按钮取代（使用户的生活更加轻松）。

默认情况下会选中“是”选项并启用选择。如果用户选中单选按钮，则相应地启用或禁用选择。

<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>

Answer 4

简单＆amp;简单： 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()">

工作正常;）

Answer 5

HMM。为什么不使用onClick()

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

DropDownList中的onChange和onSelect

5 个答案: