jquery - 根据表单输入显示元素

Question

查看以下简化代码:

<select id="number">
  <option value="">Select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div id="show1" style="display:none;">Section 1</div>
<div id="show2" style="display:none;">Section 2</div>
<div id="show3" style="display:none;">Section 3</div>
<div id="show4" style="display:none;">Section 4</div>
<div id="show5" style="display:none;">Section 5</div>

我想要实现的是:如果用户在下拉列表中选择选项“2”，我想显示(使其可见)前两个 div。如果用户选择“4”，我希望前四个 div 可见，依此类推。

编写 jQuery 函数的最佳方式是什么，使其非常简短、高效且可扩展(即使我将其从 5 个选项扩展到 30 个选项，函数仍保持不变)？

Answer 1

var $sections = $('.section');
$('#number').change(function(){
    var value = $(this).val();
    $sections.hide(1, function(){
        $sections
            .slice(0, value)
            .show();    
    });
});

Demo