Update Dropdown Menu Values Depending On User Selection July 20, 2022 Post a Comment I have the following html: Sizes small 10 Solution 1: Keep and object of your size quantities and update the select accordingly. Alternatively you could put both the size and quantity as a value of the select and then process the string e.g value="s|10" and then split the string, or use the data attribute of the html (or some other attribute)... Anyhow I think this is the best option below: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script> sizes = {"m": 5, "s": 10, "l":2, "xl": 50} $(function(){ $("#sizes").change(function(){ index = $(this).val(); var html = '<select name="quantity">'; for (var i=0;i<sizes[index];i++){ html += "<option value=" + (i + 1) +">" + (i+1) + "</option>"; } html +="</select>" $("#quantity").html(html); }) }) </script> </head> <body> <label>Sizes <select id="sizes" name="item_options[product_size]"> <option value="s">small <span class="avail-inventory">5</span></option> <option value="m">medium <span class="avail-inventory">10</span></option> <option value="l">large <span class="avail-inventory">2</span></option> <option value="xl">extra large <span class="avail-inventory">50</span></option> </select> </label> <br> <label>Quantity</label> <span id="quantity"> Please select size first </span> </body> </html> Copy EDIT if you want to have a dropdown displayed here is how to do it: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script> sizes = {"m": 5, "s": 10, "l":2, "xl": 50} $(function(){ $("#sizes").change(function(){ index = $(this).val(); console.log(sizes[index]) var html = ''; for (var i=0;i<sizes[index];i++){ html += "<option value=" + (i + 1) +">" + (i+1) + "</option>"; } $("#quantity").html(html); $("#quantity").removeAttr("disabled"); }) }) </script> </head> <body> <label>Sizes <select id="sizes" name="item_options[product_size]"> <option value="s">small <span class="avail-inventory">5</span></option> <option value="m">medium <span class="avail-inventory">10</span></option> <option value="l">large <span class="avail-inventory">2</span></option> <option value="xl">extra large <span class="avail-inventory">50</span></option> </select> </label> <br> <label>Quantity</label> <select id="quantity" disabled=true> <option>Please select size first</option></select> </body> </html> Copy Solution 2: After some research it appears you can't get the text() or html() from any tags in an <option>. I changed the text inside the options a bit so that I could retrieve the value from the Option tag as a string and just did a split. http://jsfiddle.net/kasdega/hqLPp/ <option value="s">small - 10</option> $(document).ready(function(){ $("#productSize").change(function(){ var me = $(this); var avail = me.find("option:selected").html().split("-")[1].trim(); $("#quantity option").each(function() { $(this).remove(); }); for(var i=1; i<= avail; i++) { $("#quantity").append("<option>"+i+"</option>"); } }); }); Copy Share Post a Comment for "Update Dropdown Menu Values Depending On User Selection"
Post a Comment for "Update Dropdown Menu Values Depending On User Selection"