Question

我有以下代码，其中UI上有2个下拉菜单。当我选择下拉1的值“1”时，应该禁用下拉2。当我选择值“1”时，下拉列表2被禁用。但是，当用户从下拉列表1中选择值“2”时，我无法重新启用下拉菜单2.我不确定，因为我正在调用两个performValidation()事件的onClick方法下拉菜单中的选项。

代码：

<html>
<head></head>
<script = "text/javascript">
     function performValidation()
     {
           if (document.mainForm.criteriaOne.value == "1")
           {
                document.mainForm.criteriaTwo.options.length = 0;
                document.mainForm.criteriaTwo.disabled = true;
           }
           else
                document.mainForm.criteriaTwo.disabled = false;
     }
</script>
<body>
        <form name="mainForm" action= "" method ="get">
              Criteria One:<select id = "criteriaOne">
             <option value = "1" onClick ="performValidation()"> Select One - One</option>
             <option value = "2" onClick ="performValidation()"> Select one - Two</option>
              </select>
              Criteria Two:<select id = "criteriaTwo">
             <option value = "1" onClick ="performValidation()"> Select Two - One</option>
              </select>
         </form> 
</body>
</html>

Answer 1

您需要在选择

之类的内容中将函数连接到onchange事件

document.getElementById("criteriaOne").onchange = function() 
         { // do some work to check the selectedIndex and determine whether to re-                enable the other drop down}

Answer 2

您不一定需要

document.mainForm.criteriaTwo.options.length = 0;

启用/禁用下拉列表 - Javascript

2 个答案: