Question

我的表单中有4个下拉列表，但要显示结果，应选择“主”下拉列表。所以我的问题是，在用户从特定下拉菜单中选择一个选项之前，我应该如何禁用所有其他下拉菜单？

**main**
<select class="form-control" name="make">
<option><option>
</select>

**others**
<select class="form-control" name="model">
<option><option>
</select>

<select class="form-control" name="year">
<option><option>
</select>

<select class="form-control" name="price">
<option><option>
</select>

Answer 1

首先禁用3个下拉菜单。然后通过简单的jQuery更改主菜单启用它们。

工作示例：http://jsfiddle.net/knY2T/

<select class="form-control" name="make">
<option><option>
</select>

<select class="form-control" name="model" disabled>
<option><option>
</select>

<select class="form-control" name="year" disabled>
<option><option>
</select>

<select class="form-control" name="price" disabled>
<option><option>
</select>

jQuery的：

$("select[name='make']").change( function() {
    $("select[name='model']").removeAttr("disabled");
    $("select[name='year']").removeAttr("disabled");
    $("select[name='price']").removeAttr("disabled");
});

Answer 2

将attr'禁用'添加到“其他”选择输入：

<select class="form-control" name="..." disabled>

然后，在javascript中，执行：

$('select[name="make"]').on('change', function(){
    $('.form-control').removeAttr('disabled');
});

Answer 3

当您要求纯JavaScript答案，而不是jQuery等时：）

function validate_main(e) {
    var i, 
        bad = this.value === "please",
        selects = document.getElementsByClassName("form-control");
    for (i = 0; i < selects.length; ++i) {
        if (selects[i].id !== 'main')
            selects[i].disabled = bad;
    }
}
var sel = document.getElementById("main");
sel.addEventListener("change", validate_main);

<强> Sample fiddle

例如这个标记：

**main**
<select class="form-control" name="make" id="main">
    <option value="please">please select</option>
    <option value="main">main</option>
</select>

**others**
<select class="form-control" name="model" disabled>
    <option>others1</option>
</select>
<select class="form-control" name="year" disabled>
    <option>others2</option>
</select>
<select class="form-control" name="price" disabled>
    <option>others3</option>
</select>

如果您希望为 addEventListener 添加一些like this作为polyfill，因为附加事件的方法在浏览器之间有所不同。

您也可以直接在标记中使用onchange属性，但通常不建议这样做。

如何在选择第一个/主下拉菜单之前禁用一些下拉菜单？

3 个答案: