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

Question

我有这两个 select 标签：

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

如您所见，我的第二个 select 具有禁用属性。我想在 javascript 中，当我在第一个 select 中 select 编辑选项 "car" 时，第二个 select 随车的选择变为启用后进行选择。

如何在 javascript 中继续？

Answer 1

将 ids 放在您的 selects 上以轻松定位他们
在处理程序中，默认情况下，disable 第二个 select 元素
如果第一个select的当前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>

Answer 2

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 版本:

$('#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>

Answer 3

您需要为您分配一个 id select 元素，例如：

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

Answer 4

试试这个：

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

Answer 5

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

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

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

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

然后您可以将逻辑分配给控制器并决定要对 select 或 div 做什么。

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

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

javascript

html

disabled-input