How do I use JavaScript so that the selection option depends on the previous selection option?

advertisements

Here is my problem. I am trying to have this second select option be dependent on the previous select option. The first select option determines color of shoe. The second select option, size, is based on the color of the shoe. How can I make this dynamic enough to change available sizes based on color?

Here is my code:

<SCRIPT type="text/javascript">

$(document).ready(function()
{
    $("#color").change(function()
    {
        var element = $(this);

        if(element.val() === "brn")
        {
            $("#size").append('<option value="5">5</option>');
            $("#size").append('<option value="6">6</option>');
            $("#size").append('<option value="7">7</option>');
            $("#size").append('<option value="8">8</option>');
            $("#size").append('<option value="9">9</option>');
            $("#size").append('<option value="10">10</option>');
            $("#size").append('<option value="11">11</option>');
            $("#size").append('<option value="12">12</option>');
            $("#size").append('<option value="13">13</option>');
        }

        else if(element.val() === "blk")
        {
            $("#size").append('<option value="7">7</option>');
            $("#size").append('<option value="8">8</option>');
            $("#size").append('<option value="9">9</option>');
            $("#size").append('<option value="10">10</option>');
            $("#size").append('<option value="11">11</option>');
            $("#size").append('<option value="12">12</option>');
            $("#size").append('<option value="13">13</option>');
        }

         else if(element.val() === "nav")
        {
            $("#size").append('<option value="5">5</option>');
            $("#size").append('<option value="6">6</option>');
            $("#size").append('<option value="7">7</option>');
            $("#size").append('<option value="8">8</option>');
            $("#size").append('<option value="9">9</option>');
            $("#size").append('<option value="10">10</option>');
        }

        else if(element.val() === "sbl")
        {
            $("#size").append('<option value="5">5</option>');
            $("#size").append('<option value="6">6</option>');
            $("#size").append('<option value="7">7</option>');
            $("#size").append('<option value="8">8</option>');
            $("#size").append('<option value="9">9</option>');
            $("#size").append('<option value="10">10</option>');
        }

        else if(element.val() === "pnk")
        {
            $("#size").append('<option value="5">5</option>');
            $("#size").append('<option value="6">6</option>');
            $("#size").append('<option value="7">7</option>');
            $("#size").append('<option value="8">8</option>');
            $("#size").append('<option value="9">9</option>');
            $("#size").append('<option value="10">10</option>');
        }
    });
});
<form action="#" method="post">
    <p align="center">
        <label for="color">Color:
            <select name="color" id="color">
                <option value="brn">Brown</option>
                <option value="blk">Black</option>
                <option value="nav">Navy</option>
                <option value="sbl">Sky Blue</option>
                <option value="pnk">Pink</option>
            </select>
        </label>
    </p>

    <p align="center">
        <label for="size">Size:
            <select name="size" id="size">
                function();
            </select>
        </label>
    </p>

    <div align="center">
        <input type="submit" value="Add To Cart" />
    </div>
</form>

The problem lies in your strings, e.g. "<option value="5">5</option>". You have to escape the double quote, or use single quotes instead:

'<option value="5">5</option>'

or, equally valid:

"<option value='5'>5</option>"

Also, pay attention to Stryner's comment.