Javascript 如何禁用某些下拉列表，直到选择第一个/主下拉列表？

我的表格中有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>

**main**
**其他**

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

工作示例：

---

将属性“禁用”添加到“其他”选择输入：

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

---

当您要求一个纯JavaScript答案，而不是jQuery之类的答案时：）

功能验证\u主（e）{
var i，
坏=这个。值==“请”，
选择=document.getElementsByClassName（“表单控件”）；
对于（i=0；i

例如，给定此标记：

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

**main**
请选择
主要的
**其他**
其他1
其他2
其他3

如果您喜欢为addEventListener添加polyfill作为附加事件的方法，那么不同浏览器之间会有所不同

---

您也可以在标记中直接使用

onchange

属性，但通常不建议这样做。

给他们

disabled

属性，然后添加一些JS以在适当时重新启用它们？你在哪里卡住了？看看右边“相关”标题下的一些问题。

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

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

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

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