DropDownList 中的 onChange 和 onSelect答案

【问题标题】：onChange and onSelect in DropDownListDropDownList 中的 onChange 和 onSelect
【发布时间】：2012-03-29 23:37:03
【问题描述】：

我有一个 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();" 可以解决问题，但还是不行。

谢谢

【问题讨论】：

看起来单选按钮会更合适。此外，onselect 不是 select 和 option 元素的有效属性。

标签： javascript html onchange

【解决方案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>

【讨论】：

【解决方案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"

【讨论】：

【解决方案3】：

简单易行： 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()">

一切正常；）

【讨论】：

【解决方案4】：

要制作一个健壮的表单，让它以有用的状态加载并使用脚本来增强其行为。在下文中，选择已被单选按钮取代（使用户的生活更轻松）。

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

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

【讨论】：

【解决方案5】：

嗯。为什么不使用onClick()

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

【讨论】：

这也行得通，但它不是处理大量数据（例如国家、电话代码等）的理想解决方案，而且当动态获取选择选项时，这将是另一个挑战。