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输出的值是＆＃34; 1 Ink Pad＆＃34;，＆＃34; 2 Ink Pads＆＃34;，＆＃34; 3 Ink Pads＆＃34; ＆安培; ＆＃34; 4个墨垫＆＃34;。是否有一种简单的方法来编辑JS以将其考虑在内？

Answer 1

如果值的格式如下，您可以使用parseInt()：

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

这只会得到值中的整数部分，例如来自1的{{1}}。

jsFiddle here

Answer 2

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

更好

除此之外。您可以使用选择selectedIndex或选项索引属性而不是它的值。

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

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

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

2 个答案: