如何禁用(或改变颜色)第二个下拉选项取决于第一个选择

How to disable (or change color) of 2nd drop down option depenging on 1st selection?

本文关键字：选项 取决于 选择 第一个 第二个 何禁用 改变 变颜色      更新时间：2023-09-26

我的问题是"如何改变选项的颜色(或禁用)在第二个下拉列表取决于第一个选择?"与javascript/jquery。

例如:如果在第一个下拉列表中选择了"13 Stairs"，那么在第二个下拉列表中，14和15 Stairs的颜色应该是"红色"(或禁用)

像"if option==13 Stairs* -> 14*/15* == disabled"或者"如果选中值"a" ->值"m-r" =红色。"

也许它很容易，但我是一个完全的面条在Javascript。:（希望有人能帮助我。

<form id="test" name="test" method="post" action="">
    <label for="demo"></label>
    <select name="first-election" id="first-election">
      <option value="a">13 Stairs - 001</option>
      <option value="b">13 Stairs - 002</option>
      <option value="c">13 Stairs - 003</option>
      <option value="d">14 Stairs - 001</option>
      <option value="e">14 Stairs - 002</option>
      <option value="f">14 Stairs - 003</option>
      <option value="g">15 Stairs - 001</option>
      <option value="h">15 Stairs - 002</option>
      <option value="i">15 Stairs - 003</option>
    </select>
<br /><br />
    <select name="color" id="color">
      <option value="j">13 Stairs - green</option>
      <option value="k">13 Stairs - yellow</option>
      <option value="l">13 Stairs - black</option>
      <option value="m">14 Stairs - green</option>
      <option value="n">14 Stairs - yellow</option>
      <option value="o">14 Stairs - black</option>
      <option value="p">15 Stairs - green</option>
      <option value="q">15 Stairs - yellow</option>
      <option value="r">15 Stairs - black</option>
    </select>
</form>

如何将option变为disable 

var $options = $('#color').find('option');
$('#first-election').change(function () {
    var num = parseInt( $('option:selected', this).text(), 10 );
    $options.prop('disabled', false).filter(function () {
        return $.text(this).indexOf(num) !== 0;
    }).prop('disabled', true);
}).change();

这里是小提琴:http://jsfiddle.net/Gp7fF/

除非你编写自己的自定义选择对象(由div组成，看起来像一个stock select，但不使用标准浏览器对象)，否则你不能将一些项设置为一种颜色，而将其他项设置为另一种颜色。但是，您可以重新绘制整个选择器以拥有您想要的任何字段，因此第二种方法(隐藏不再相关的元素)是完全可行的。

你需要使用onSelect回调并将其放在第一个下拉列表中，然后编写一个函数，根据用户在第一个下拉列表中选择的项目更改第二个下拉列表的内容。

我认为你可以做到。看看这个例子:http://jsfiddle.net/TxbVt/773

HTML: 

<select>
    <option>1111111</option>
    <option>222222222</option>
    <option>33333333</option>
    <option>44444444</option>
</select>

JS: 

var options = document.getElementsByTagName('option');
for(var i = 0; i < options.length; i += 1) {
    var option = options[i];
    var colors = ['blue','yellow','purple','brown'];
    $(option).css('background-color',colors[i]);
}

点击选择表单，选项有不同的颜色

相关文章：