Question

我试图隐藏一些元素，具体取决于下拉选项选项号...请看一下：

HTML：

<div class="box_1">some content</div>
<div class="box_2">some content</div>
<div class="box_3">some content</div>
<div class="box_4">some content</div>
<div class="box_5">some content</div>

<select id="select">
<option value="1">Show 1 boxes</option>
<option value="2">Show 2 boxes</option>
<option value="3">Show 3 boxes</option>
<option value="4">Show 4 boxes</option>
<option value="5">Show 5 boxes</option>
</select>

到目前为止，我的JS看起来像这样：

jQuery("#select").change(function() {
     var currSelection = jQuery("option:selected",this).val();

});

而且我不确定如何从这里开始...

因此，如果选择4，例如，我想隐藏第五个框元素，如果选择3，我想隐藏第4个和第5个框元素......等等。感谢...

Answer 1

试试这个

jQuery("#select").change(function() {
    $("div[class^='box_']").show().filter(":gt("+(parseInt($(this).val()) -1 )+")").hide();
}).change();

正在使用 demo

Answer 2

这可以使用Array.slice非常简洁地完成（因为jQuery对象是array-ish，所以这是有效的）：

jQuery("#select").change(function() {
   $("div[class^='box']").hide().slice(0, $(this).val()).show();
}).change();

Try it out here.

jQuery隐藏元素取决于下拉选择选项？

2 个答案: