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

Answer 2

怎么样：

$("#number").bind("change", function () {
    var value = parseInt(this.value, 10);

    $("div[id^='show']").hide();

    for(var i = 1; i <= value; i++) {
        $("#show" + i).show();
    }
});

示例： http://jsfiddle.net/cVjtv/

备注：

bind是select#number元素的change事件的事件处理程序。

使用.hide()和attribute starts with selector隐藏以“show”开头的所有div

包含从1到 n 的循环，其中 n 是在select元素中选择的值，在每次迭代中隐藏相应的div

更新：这是一个更简洁（但不太可读）的版本，有点像@ Shef's：

$("#number").bind("change", function () { var value = parseInt(this.value, 10); $("div[id^='show']") .hide() .filter(function () { var id = parseInt(this.id.replace("show", ""), 10); return id <= value; }) .show(); });

Answer 3

$('#number').change(function(){
    // get the value of the selected list item
    var v = parseInt($(this).val()) + 1
    // hide all divs, then filter for divs with id less than the slected list item
    $('div').css({display:'none'}).filter(function(){
        return parseInt($(this).attr('id').replace(/show/,'')) < v
    // display the filtered divs
    }).css({display:'block'})
})

演示：http://jsfiddle.net/Gyx9D/

Answer 4

我个人会从div中删除id（如果你想让选择器更具体一些，可以应用一个类）并将它们包装在父级中（让我们称之为目标）。从那里你可以使用一个简单的函数只显示前n个子div。所以结构是：

<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="target">
 <div style="display:none;">Section 1</div>
 <div style="display:none;">Section 2</div>
 <div style="display:none;">Section 3</div>
 <div style="display:none;">Section 4</div>
 <div style="display:none;">Section 5</div>
</div>

您可以使用以下内容绑定选择的更改并隐藏/显示div：

$(document).ready(function(){

 $('#number').live('change', function() {

  var count = $(this).val();

  $('#target div').each(function(i, n){

   if(i < count)
   {
    $(n).show();
   }
   else
   {
    $(n).hide();
   }
  });
 });
});

根据表单输入显示元素

4 个答案: