如何在第一個選擇上禁用（或更改顏色）第二個下拉選項？

Question

我的問題是“如何根據第一個選擇在第二個下拉列表中更改選項顏色（或禁用）？” 使用javascript / jquery。

例如：如果在我的第一個下拉列表中選擇“ 13個樓梯”，則第14和15個樓梯在第二個下拉列表中應具有“紅色” （或禁用）顏色。

類似“ if option == 13 Stairs *-> 14 * / 15 * == disable”或“ if selected value“ a”-> value“ mr” = red“之類的東西。

也許這很容易，但是我完全是Java語言中的小人物。 :(希望有人可以幫我。

<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

除非您編寫自己的自定義選擇對象（由Divs制成，並且看起來像股票選擇，但不使用標准瀏覽器對象），否則不能將某些項目設置為一種顏色，而將其他項目設置為另一種顏色。 但是，您可以重新繪制整個選擇器以具有所需的任何字段，因此第二種方法（隱藏不再相關的元素）是完全可行的。

您將要使用onSelect回調並將其放在第一個下拉列表中，然后編寫一個函數，該函數根據用戶在第一個下拉列表中選擇的項來更改第二個下拉列表的內容。

Answer 2

以下是disable option s的方法：

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/

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

單擊選擇表單，選項具有不同的顏色。