我有一个包含三个选择选项的产品页面:
- 适合
- 颜色
- 尺寸
默认情况下,“适合”下拉菜单和“颜色”下拉菜单处于事件状态,并选择了默认值(例如,常规适合和红色)。
“尺寸”下拉菜单需要根据“适合”下拉菜单中的选择进行更改。例如,如果“娇小”合身 被选中,然后会显示小号的“尺码”的相应下拉菜单。如果用户随后决定选择“长款”尺码,则会显示带有长款尺码的“尺码”的相应下拉菜单。
我有两个问题:
- 默认情况下,由于我使用的脚本,“大小”下拉列表不会出现(请参见下面的代码片段)。它仅在您从“适合”下拉列表中选择一个新值后出现。
- 理想情况下,我希望在用户选择不同的“尺寸”时保持相同的“尺寸”值。例如,如果选择了尺码 10 的常规版型,而用户选择了小号版型,此时初始值为“- 选择尺码 -”。我希望它将 10 的值传递给新的下拉列表,这样用户就不必再次选择尺寸。 (由 zack-w 回答 https://stackoverflow.com/a/41290039/7331363 )
到目前为止,我在 jsFiddle 上有以下代码:
https://jsfiddle.net/dodgers76/c0dvdwbz/
$(function(){
var sizeVal = 'none';
$("select.selector-fit").on("change", function(){
//remove active
$("select.selector-sizes.active").removeClass("active");
//check if select class exists. If it does then show it
var subList = $("select.selector-sizes."+$(this).val());
if (subList.length){
//class exists. Show it by adding active class to it
subList.addClass("active");
subList.val(sizeVal);
}
});
$('.selector-sizes').on('change', function() {
sizeVal = $(this).val();
});
});
最佳答案
如果您想在不同尺码选择之间共享当前所选尺码值,则必须将其设为变量。
var sizeVal = 'none';
$('.selector-sizes').on('change', function() {
sizeVal = $(this).val();
});
编辑
您可以添加 value
选择选项的属性,以便无论文本 <option value="20">20 (not available)</option>
值如何匹配
Here is the updated JSFiddle for your edit
看看我是如何改变 <option>
的适合 20 多岁的所有尺寸
关于javascript - 根据另一个选择选项更改显示哪个选择,并保持相同的选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41289583/