0

私の問題は、「最初の選択に応じて、2 番目のドロップダウン リスト内でオプションの色を変更する (または無効にする) 方法」です。JavaScript / jqueryで。

例: 最初のドロップダウン リストで「13 階段」を選択した場合、14 番目と 15 番目の階段は、2 番目のドロップダウン リストで「赤」(または無効)にする必要があります。

「option==13 Stairs* -> 14* / 15* == disabled」または「if selected value "a" -> value "mr" = red」のようなものです。

おそらく非常に簡単ですが、私は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>
4

3 に答える 3

0

私はあなたがそれを行うことができると思います。この例を見てください: 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-21T01:24:53.033 に答える
0

独自のカスタム選択オブジェクト (Div で作成され、ストック選択のように見えるように構築されていますが、標準のブラウザー オブジェクトを使用していない) を作成しない限り、一部の項目をある色に設定し、他の項目を別の色に設定することはできません。ただし、セレクター全体を再描画して、必要なフィールドを含めることができるため、2 番目のアプローチ (関連性がなくなった要素を非表示にする) は完全に実行可能です。

onSelect コールバックを使用して最初のドロップダウンに配置し、ユーザーが最初に選択した項目に基づいて 2 番目のドロップダウンの内容を変更する関数を記述します。

于 2013-01-21T01:04:38.623 に答える
0

方法disableはoption次のとおりです。

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-21T01:09:58.550 に答える