Question

我的问题是“如何在第二个下拉列表中更改选项颜色（或禁用），具体取决于第一个选择？”用javascript / jquery。

例如：如果在我的第一个下拉列表14和15楼梯中选择“13楼梯”，则第二滴中的颜色应为“红色” （或禁用） 下来。

类似“if option == 13 Stairs * - ＆gt; 14 * / 15 * == disabled”或者 “如果选择值”a“ - ＆gt;值”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>

Answer 1

除非您编写自己的自定义选择对象（由Div构成并且构建为看起来像股票选择但不使用标准浏览器对象），否则您无法将某些项目设置为一种颜色而将其他项目设置为另一种颜色。但是，您可以重新绘制整个选择器以包含您想要的任何字段，因此您的第二种方法（隐藏不再相关的元素）是完全可行的。

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

Answer 2

以下是disable的{{1}}：

的方法

option

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

Answer 3

我认为你可以做到。看看这个例子： 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]);
}

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

如何根据第一选择禁用（或更改颜色）第二个下拉选项？

3 个答案: