Question

我想基于对第一个下拉列表id = "event"的选择来禁用第二个下拉列表中的某些特定选项，即id="domain"。我在此处尝试做的是，如果我从第一个下拉菜单中选择“机器人”，然后在第二个下拉菜单中选择类名为B，C，F，{{1} }将被禁用。这是我的代码：

此代码未执行任何操作。请帮助我。

Answer 1

Working Codepen下面的解释。

您遇到了一些问题，这里似乎已经忽略了一个问题：

<input type="submit" ...

表单中的submit按钮会自动提交表单（刷新/更改页面）。那就是重置所有下拉菜单并选择值。更改为：

<input type="button" ...

第二，如前所述，从您的选择选项中删除类，而我们将使用jQuery使用它们的实际值来选择它们：

<select name="eventdrop" id="event">
    <option value="">--- Please select ---</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
</select>

现在对于您的jQuery，您有正确的主意，但只是错误地选择了域名下拉列表：

function validate()
{
    var domainDropValue = $("#domain").val();

    if (domainDropValue === "")
    {
        $("#domain").focus();
    }
    else if(domainDropValue === "Robotics")
    {
        $('#event option[value=B]').attr("disabled", "disabled");
        $('#event option[value=C]').attr("disabled", "disabled");
        $('#event option[value=F]').attr("disabled", "disabled");
        $('#event option[value=G]').attr("disabled", "disabled");
    }
}

Answer 2

您在班级名称前缺少.。对于类选择器，应为.B，.c，依此类推：

$('.B').attr("disabled", "disabled");
$('.C').attr("disabled", "disabled");
$('.F').attr("disabled", "disabled");
$('.G').attr("disabled", "disabled");

Answer 3

您正在使用“提交”按钮直接提交表单。添加：e.preventDefault()用于阻止提交。然后在完整的jquery中添加一些代码：

 $("form").submit(function(e) {
    e.preventDefault();
  if ($("#domain").val() == "") {

  } else if ($("#domain").val() == "Robotics") {
    $('.B, .C, .F, .G').attr("disabled","disabled");
  }
 })

jsfiddle：https://jsfiddle.net/xpvt214o/673259/

无法禁用下拉菜单中的某些特定选项

3 个答案: