javascript - 根据另一个选择选项更改显示哪个选择，并保持相同的选项值

Question

我有一个包含三个选择选项的产品页面:

• 适合
• 颜色
• 尺寸

默认情况下，“适合”下拉菜单和“颜色”下拉菜单处于事件状态，并选择了默认值(例如，常规适合和红色)。

“尺寸”下拉菜单需要根据“适合”下拉菜单中的选择进行更改。例如，如果“娇小”合身 被选中，然后会显示小号的“尺码”的相应下拉菜单。如果用户随后决定选择“长款”尺码，则会显示带有长款尺码的“尺码”的相应下拉菜单。

我有两个问题:

1. 默认情况下，由于我使用的脚本，“大小”下拉列表不会出现(请参见下面的代码片段)。它仅在您从“适合”下拉列表中选择一个新值后出现。
2. 理想情况下，我希望在用户选择不同的“尺寸”时保持相同的“尺寸”值。例如，如果选择了尺码 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();
  });
});

Answer 1

如果您想在不同尺码选择之间共享当前所选尺码值，则必须将其设为变量。

var sizeVal = 'none';

$('.selector-sizes').on('change', function() {
    sizeVal = $(this).val();
});

Here is the JSFiddle

编辑

您可以添加 value选择选项的属性，以便无论文本 <option value="20">20 (not available)</option> 值如何匹配

Here is the updated JSFiddle for your edit

看看我是如何改变 <option> 的适合 20 多岁的所有尺寸