javascript 在另一个选择标签中选择一个值时启用禁用的选择

enable a disabled select when choose a value in another select tag

提问by french_dev

I have these two select tag:

我有这两个选择标签：

<select>
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

As you can see, my second select have the disabled attribute. I would like in javascript, when I selected the option "car"in my first select, the second select with the car's choice become enabled to make a choice.

如您所见，我的第二个选择具有禁用属性。我想在 javascript 中，当我在第一个选择中选择选项“汽车”时，第二个选择与汽车的选择变得启用做出选择。

How can I proceed in javascript?

我如何在 javascript 中继续？

回答by Praveen Kumar Purushothaman

JavaScript Version:

JavaScript 版本：

document.getElementById("one").onchange = function () {
  document.getElementById("two").setAttribute("disabled", "disabled");
  if (this.value == 'car')
    document.getElementById("two").removeAttribute("disabled");
};

<select id="one">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select disabled id="two">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

jQuery Version:

jQuery 版本：

$('#one').change(function() {
  $('#two').prop('disabled', true);
  if ($(this).val() == 'car') {
    $('#two').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="one">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select id="two" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

回答by AmmarCSE

1. Put idson your selectsto easily target them
2. In the handler, by default, disablethe second selectelement
3. If the current valof the first select is car, then set disabledto false

1. 穿上ids你的衣服selects，轻松瞄准他们
2. 在处理程序中，默认情况下，disable第二个select元素
3. 如果val第一次选择的当前是car，则设置disabled为false

$('#AutoType').change(function() {
  $('#Model').prop('disabled', true);
  if ($(this).val() == 'car') {
    $('#Model').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="AutoType">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select id="Model" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

回答by Manashvi Birla

You need to assign an idto you select element like:

您需要为id您选择的元素分配一个，例如：

<select id="my-input-id" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

 document.getElementById('my-input-id').disabled = false;

回答by user3106974

Try this:

试试这个：

<form id="creation" name="creation" onchange="handleSelect()">
    <select name="select01" id="select01">>
      <option value="car">car</option>
      <option value="truck">truck</option>
      <option value="moto">moto</option>
      <option value="none">none</option>
    </select>

    <select name="select02" id="select02" disabled>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    </form>

    function handleSelect() {
     if (this.value == '01') {
         document.getElementById('select02').disabled = true;
     } else {
         document.getElementById('select02').disabled = false;
     }
 }

回答by Shih-Min Lee

Do you want to simply use a frontend framework such as Angular or React.js or Ember?? It's much easier if you want to do something complicated.

你想简单地使用一个前端框架，比如 Angular 或 React.js 或 Ember？？如果你想做一些复杂的事情，那就容易多了。

A demo is as follows: http://jsfiddle.net/PxdSP/2244/

一个demo如下：http: //jsfiddle.net/PxdSP/2244/

All you need to do is include angular.js in your website

您需要做的就是在您的网站中包含 angular.js

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

You can then assign logic to the controller and decide what you want to do with the select or divs.

然后，您可以将逻辑分配给控制器并决定要对选择或 div 执行的操作。