Update Dropdown Menu Values Depending On User Selection July 26, 2023 Post a Comment I have the following html: Sizes small 10Solution 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><scriptsrc="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 <selectid="sizes"name="item_options[product_size]"><optionvalue="s">small <spanclass="avail-inventory">5</span></option><optionvalue="m">medium <spanclass="avail-inventory">10</span></option><optionvalue="l">large <spanclass="avail-inventory">2</span></option><optionvalue="xl">extra large <spanclass="avail-inventory">50</span></option></select></label><br><label>Quantity</label><spanid="quantity"> Please select size first </span></body></html>CopyEDITif you want to have a dropdown displayed here is how to do it:<html><head><scriptsrc="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 <selectid="sizes"name="item_options[product_size]"><optionvalue="s">small <spanclass="avail-inventory">5</span></option><optionvalue="m">medium <spanclass="avail-inventory">10</span></option><optionvalue="l">large <spanclass="avail-inventory">2</span></option><optionvalue="xl">extra large <spanclass="avail-inventory">50</span></option></select></label><br><label>Quantity</label><selectid="quantity"disabled=true><option>Please select size first</option></select></body></html>CopySolution 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"