Jquery 基于所选选项显示/隐藏多个div-几乎没有

我有下面的代码，我从这里的帖子拼凑而成，到目前为止它还在工作

<label>Number of Colours</label>
<select id="main-select">
    <option value="1">1 Colour</option>
    <option value="2">2 Colours</option>
    <option value="3">3 Colours</option>
    <option value="4">4 Colours</option>
</select>

<div class="colour-option" id="colour1">
<label>1st Colour</label>
<select>
    <option value="colour1">Colour One</option>
    <option value="colour2">Colour Two</option>
    <option value="colour3">Colour Three</option>
</select>
</div>

<div class="colour-option" id="colour2">
<label>2nd Colour</label>
<select>
    <option value="colour1">Colour One</option>
    <option value="colour2">Colour Two</option>
    <option value="colour3">Colour Three</option>
</select>
</div>

<div class="colour-option" id="colour3">
<label>3rd Colour</label>
<select>
    <option value="colour1">Colour One</option>
    <option value="colour2">Colour Two</option>
    <option value="colour3">Colour Three</option>
</select>
</div>

<div class="colour-option" id="colour4">
<label>4th Colour</label>
<select>
    <option value="colour1">Colour One</option>
    <option value="colour2">Colour Two</option>
    <option value="colour3">Colour Three</option>
</select>
</div>

你可以在这里看到它的作用： 这正是我希望它工作的方式，然而，我的主选择是为我生成的，因此值不能简单地是，1，2，3，4。它们构成Shopify购物车的一部分，我主要选择的输出值是1个墨水垫、2个墨水垫、3个墨水垫和4个墨水垫。有没有一种简单的方法来编辑JS来考虑这一点？

如果值的格式是这样的，您可以使用：

showDiv(parseInt(this.value, 10));

这将仅从值中获取整数部分，例如从1个墨水垫中获取1

---

首先，IMO建议，添加和删除一个确定隐藏的类比使用.hide和.show更好

除此之外。您可以使用selectedIndex或options index属性，而不是它的值

var showDiv = function (colour) {
  $('.colour-option').hide();
  $('.colour-option:lt(' + colour + ')').show();
};

$('#main-select').change(function () {
  showDiv($(this).prop('selectedIndex') + 1);
}).change();

---

太棒了，谢谢！麻烦你解释一下这是怎么回事？我只是想了解它的不同之处我对JS很陌生谢谢编辑，啊！你已经解释过了！谢谢！！！：是否有可能以某种方式使未显示的输入处于禁用状态或清除其值？这样做的一个陷阱是，如果我选择四种颜色，然后在每个下拉列表中选择一种，然后我改变主意，选择两种颜色，它会隐藏最后两种选择，但它们的值会保留。这意味着它们正在被传递到购物车。@shorn您是否尝试过使用类似$'.color option'.val.hide；而不是$'.color option'.hide；谢谢你，我试过了，但是没有任何效果。它仍然保持与以前相同的值？仔细想想，这是不是因为.color选项针对的是div，而不是实际的select？同样感谢您。您的css add.hidden{display:none；}中是否有添加/删除隐藏类的示例而不是.hide使用$'color-option'。addClass'hidden'而不是.show您可以使用.removeClass'hidden'或.toggleClass'hidden'，两者都可以工作。

var showDiv = function (colour) {
  $('.colour-option').hide();
  $('.colour-option:lt(' + colour + ')').show();
};

$('#main-select').change(function () {
  showDiv($(this).prop('selectedIndex') + 1);
}).change();