Question

我的产品页面有三个选择选项：

适应
颜色
尺寸

默认情况下，“适合”下拉列表和“颜色”下拉列表处于活动状态且已选择默认值（例如常规适合和红色）。

“尺寸”下拉列表需要根据“适合”下拉列表中的内容进行更改。例如，如果'小“适合如果选中，则会显示“尺寸”的适当下拉列表，其中包含小尺寸。如果用户随后决定选择“长”，则会显示长尺寸“尺寸”的相应下拉列表。

我有两个问题：

默认情况下，由于我正在使用的脚本而未显示“大小”下拉列表（请参阅下面的代码段）。它仅在您从“适合”下拉列表中选择新值后才会显示。
理想情况下，我希望在用户选择不同的“Fit”时保持相同的“大小”值。例如，如果选择了大小为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

看看我如何更改所有20码的<option>

更改基于另一个选择选项显示的选择，并保持相同的选项值

1 个答案:

修改