如何禁用（或改變顏色）的第二下拉選項取決於第一選擇？

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

例如：如果選擇了「13個樓梯」在我的第一下拉列表14和15個樓梯應該有顏色「紅」 （或禁用）在第二降下來。如果選擇值「a」 - >值「m-r」=紅色，「if if option == 13 Stairs * - > 14 */15 * == disabled」或「。

也許它很容易，但我完全不用Javascript。 :( 希望有人能HEP我。

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

來源

2013-01-21 Oliver Lattemann

您不能在'select'元素中設置'option's的顏色。 –

但也許禁用它們？ –

這裏是如何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/

來源

2013-01-21 01:09:58

這個函數讀取一個選項的前10個字符，然後在第二個#colors中禁用它們嗎？任何想法如何查找「一個短語」？ –

除非你寫你自己的自定義選擇對象（取得的div和建造看起來像一個股票選擇，但不使用標準的瀏覽器對象），你不能設置一些項目到另一個顏色和其他項目，但是，您可以重新繪製您的整個選擇器以獲得您想要的任何字段，因此您的第二種方法（隱藏不再相關的元素）是完全可行的。您需要使用onSelect回調函數，並將其放在第一個下拉列表中，然後編寫一個函數，根據用戶在第一個項目中選擇的項目來更改第二個下拉列表中的內容。

來源

2013-01-21 01:04:38

我認爲你可以做到這一點。請看下面的例子： 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]); 
}

單擊選擇形式，選項有不同的顏色。

來源

2013-01-21 01:24:53

如何禁用（或改變顏色）的第二下拉選項取決於第一選擇？

回答

相關問題