根据所选选项显示/隐藏多个 div - 几乎就在那里

Question

我有以下代码，这些代码是我从这里的帖子拼凑而成的，到目前为止它的工作...

<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>

连同下面的jQuery...

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

$('#main-select').change(function () {
showDiv($(this).val());
}).change();

您可以在这里看到它的实际效果：http://jsfiddle.net/UWUYN/5/ 这正是我希望它工作的方式，但是，我的#main-select 是为我生成的，因此这些值不能简单地是 1、2、3、4。它们是 Shopify 购物车的一部分，我的 #main-select 输出的值是“1 个印台”、“2 个印台”、“3 个印台”和“4 个印台”。有没有一种简单的方法来编辑 JS 以考虑到这一点？

Answer 1

如果值的格式是这样的话，你可以使用parseInt()：

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

这将仅从值中获取整数部分，例如 1 来自 1 Ink Pad。

jsFiddle here

Answer 2

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

除此之外。您可以使用 selects 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();