jquery - jQuery を使用して選択値に基づいて非表示フィールドの値を変更する

Question

ユーザーがドロップダウン メニューから選択した内容に基づいて、非表示のフォームの値を変更しようとしています。

ここに私のjQueryコードがあります:

$("#color").change(function() {
    if ($(this).val() == "black" ) {
        $("#id").val("21");
    } else if ($(this).val() == "white" ) {
        $("#id").val("22");
    }
});

ここに私のフォームhtmlがあります:

<form class="addToCart" id="addToCart" name="addToCart" action="/cart/add">
    <input type="hidden" id="id" name="id" value="21">
    <input type="hidden" id="name" name="name" value="Tank Top">
    <table width="100%" border="0" cellspacing="0" cellpadding="2">
        <tr>
            <td align="center"><span class="pink-font">Color</span></td>
            <td align="center"><span class="pink-font">Size</span></td>
            <td align="center"><span class="pink-font">Qty</span></td>
            <td align="center">&nbsp;</td>
        </tr>
        <tr>
            <td align="center">
                <select id="color" name="color">
                    <option value="black" selected="selected">Black</option>
                    <option value="white">White</option>
                </select>
            </td>

誰でも私を正しい方向に向けることができますか？私はそれを機能させることができないようです。

Answer 1

これは私が行ったコードです:

$(function() {
    $("#color").change(function() {
        if (this.value == "black") {
            $("#id").val("21");
        } else if (this.value == "white") {
            $("#id").val("22");
        }
    });
});