2

私は次の問題を抱えていて、それを解決する方法がわかりません。:(

色の選択に関連してオプションを無効/グレーアウトしたい。すべてのオプションには固有の値があります。

例えば：

  • シャツ（緑）はXSでのみご利用いただけます。
  • シャツ（ブルー）はSとMでご利用いただけます。
  • シャツ（黄色）はLとXLではご利用いただけません。

「if」や配列関数のようなもので可能ですか？！？！フィドルに盗まれたコードはありますか？

助けてくれてありがとう、そして私の存在しないJSの知識をお詫びします！

<form id="test" name="test" method="post" action="">
        <label for="test"></label>
        <select name="color" id="color">
          <option value="1">---Select color---</option>
          <option value="2">T-Shirt - green</option>
          <option value="3">T-Shirt - blue</option>
          <option value="4">T-Shirt - yellow</option>
        </select>
    <br />
        <select name="size" id="size">
          <option value="5">---Select size---</option>
          <option value="6">XS</option>
          <option value="7">S</option>
          <option value="8">M</option>
          <option value="9">L</option>
          <option value="10">XL</option>
        </select>
    </form>
4

3 に答える 3

1 
var sizes_avail = {
    '2': ['6'],
    '3': ['7', '8'],
    '4': ['9', '10']
};
$("#color").change(function() {
    var color = $(this).val();
    if (sizes_avail.hasOwnKey(color)) {
        $("#size option").attr("disabled", true);
        $.each(sizes_avail[color], function(i, size) {
            $("#size option["+size+"]").attr("disabled", false);
        }
    } else {
        $("#size option").attr("disabled", false);
    }
}
于 2013-01-21T16:15:15.033 に答える
0

有効な色とサイズをキャプチャするオブジェクトを設定できると仮定すると<option>、オプションの値が許可されたサイズのセット内にあるかどうかに基づいて、無効なプロパティを設定するすべての要素を反復できます。

var availableSizesForColors = {
    '2': ['6'],
    '3': ['7', '8'],
    '4': ['9', '10']
};

// bind the function to the JavaScript 'change' event
$('#color').change(function() { 
    // look up the available colours in the object above for the given value of the shirt colour drop down
    var availableSizes = availableSizesForColors[this.options[this.selectedIndex].value];

    // set disabled = true or false if the size option is or is not in the availableSizes array
    $('#size option').prop('disabled', function () { return $.inArray(this.value, availableSizes) == -1 });
});

jsFiddle デモ

注: jQuert$.inArray関数のパフォーマンスが気になる場合は、別の「配列を含む」メソッドを使用することをお勧めします - How do I check if an array includes an object in JavaScript? を参照してください。

于 2013-01-21T16:39:45.863 に答える
0

.onChangeこれは、jQueryの関数とスイッチを使用して行うのは非常に簡単です。

これが解決策のフィドルです。

于 2013-01-21T16:14:10.910 に答える