jquery - How can I use this JavaScript to have one select option be dependent on the previous select option? -
here problem. trying have second select option dependent on previous select option. first select option determines color of shoe. second select option, size, based on color of shoe. how can make dynamic enough change available sizes based on color?
here 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 cart" /> </div> </form>
the problem lies in strings, e.g. "<option value="5">5</option>"
. have escape double quote, or use single quotes instead:
'<option value="5">5</option>'
or, equally valid:
"<option value='5'>5</option>"
also, pay attention stryner's comment.
Comments
Post a Comment