根据用户选择更新下拉菜单值 [英] update dropdown menu values depending on user selection
问题描述
我有以下html:
<label>Sizes
<select name="item_options[product_size]">
<option value="s">small <span class="avail-inventory">10</span></option>
<option value="m">medium <span class="avail-inventory">1</span></option>
<option value="l">large <span class="avail-inventory">5</span></option>
<option value="xl">extra large <span class="avail-inventory">10</span></option>
</select>
</label>
<label>Quantity
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</label>
这是购物车的一部分，用户可以在其中选择产品的选择(尺寸)和数量.由于数量总是变化的，因此我希望根据用户选择的产品选项即时更改最大数量.
This is part of a shopping cart where the user can pick product option(size) and quantity. Since the quantity always varies, I would like the max quantity change on the fly depending on what product option the user chooses.
例如，如果用户选择较大的尺寸，则数量下拉列表中的最大数量也应仅为5.
For instance if the user chooses size large the max number in quantity dropdown should also be only 5.
非常感谢
推荐答案
保持和保持您的大小数量，并相应地更新选择内容.或者，您可以将大小和数量都作为select的值，然后处理字符串，例如value ="s | 10"，然后拆分字符串，或使用html的data属性(或其他属性). .无论如何，我认为这是下面的最佳选择:
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>
编辑
如果要显示下拉列表，请按以下步骤操作:
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>
这篇关于根据用户选择更新下拉菜单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
