Question

我有5个div例如

<div class="group" id="div1">Div1</div>
<div class="group" id="div2">Div2</div>
<div class="group" id="div3">Div3</div>
<div class="group" id="div4">Div4</div>
<div class="group" id="div5">Div5</div>

然后我有一个选择控件：

<select id="mySelect">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

然后我想做什么：当在mySelect控件中选择“3”时，我想显示前3个div，当选择“5”时，我想显示所有div。另外，select的初始值例如是“2”，然后当页面加载时，我想显示前2个div。我怎样才能做到这一点？

Answer 1

This JSFiddle应该做你想做的事。

$(document).ready(function () {
    $('.group').hide();

    // Show selected number of boxes
    $('.group').slice(0, parseInt($('#selectMe').val().replace('option', ''))).show();

    // Change number of divs shown when select is changed
    $('#selectMe').change(function () {  
        var howMany = parseInt($(this).val().replace('option', ''));
        var divs = $('.group');

        divs.hide();

        divs.slice(0, howMany).show();
    });
});

在此，我们使用$.slice()拆分由.group

选择的var divs = $('.group'); div数组

这一行：

$('.group').slice(0, parseInt($('#selectMe').val().replace('option', ''))).show();

非常简洁，但它基本上与$.change()函数中的代码相同，只是更短。

Answer 2

$().ready(function () {
  // Cache selectors. We don't need to traverse the DOM on every run.
  var $divs = $('.group'),
      $select = $('#mySelect'),

  // Create a named function. I think it's nicer than having a lot of
  // anonymous functions, and allows for better re-use if the need should
  // arise.
  toggleVisible = function (event) {
    var numVisible = parseInt($(this).val(), 10);
    $divs.hide().filter(function (index) { return index < numVisible; }).show();
  };

  // Trigger the callback on change.
  $select.on('change', toggleVisible);
  // For the initial page load, trigger the handler manually.
  $select.trigger('change');
});

http://jsfiddle.net/BZGc7/

更新：使用slice，因为在这种情况下它比filter好得多：

$().ready(function () {
  // Cache selectors. We don't need to traverse the DOM on every run.
  var $divs = $('.group'),
      $select = $('#mySelect'),

  // Create a named function. I think it's nicer than having a lot of
  // anonymous functions, and allows for better re-use if the need should
  // arise.
  toggleVisible = function (event) {
    var numVisible = parseInt($(this).val(), 10);
    $divs.hide().slice(0, numVisible).show();
  };

  // Trigger the callback on change.
  $select.on('change', toggleVisible);
  // For the initial page load, trigger the handler manually.
  $select.trigger('change');
});

http://jsfiddle.net/BZGc7/1/

Answer 3

http://jsfiddle.net/vsbkg/

var showDiv = function(goal){
    var count = 1;
    $('.group').each(function(){
    if(count <= goal){
        $(this).show().nextAll('.group').hide();
    }

        count = count +1;
    });
};

var goal = $('#mySelect').val();
showDiv(goal);

$('#mySelect').change(function(){
       showDiv($(this).val());
});

Answer 4

假设div是选项的顺序，你可以使用jQuery提供的:lt()选择器：

$('.group').hide();
$('#mySelect').change(function () {
    $('.group').hide();
    $('.group:lt(' + ($(':selected', this).index()+1) + ')').show();
});

然后，您可以添加以下代码以选择加载时的第二个代码：

$('#mySelect option:eq(1)').prop('selected', true).trigger('change');

这是the edited fiddle。这具有（在我看来令人愉快的）副作用，即根本不必使用ID。

Answer 5

请尝试这个小提琴：
http://jsfiddle.net/cadence96/TXYgD/2/

它完全符合您的要求。

Answer 6

我的解决方案：：）

$(document).ready(function () {
    $('.group').hide();
    $('#selectMe').change(function () {
        var nr = $(this).val().replace(/option/,'');
        $('.group').hide().filter(function(){
             return $(this).index()<nr;
        }).show();      
    }).val('option2').trigger('change');
});

http://jsfiddle.net/JSyLV/235/

Answer 7

我认为你可以只用prevAll，nextAll和current元素来完成你想要的。只是我的版本.. DEMO这里

下面的功能应该可以解决问题，

var $select = $('#selectMe');
function showHideDiv() {

    var selectedVal = $select.val();
    $('#' + selectedVal ).prevAll('.group').show(); // <-- show all prev
    $('#' + selectedVal ).show();                   // <-- show current
    $('#' + selectedVal ).nextAll('.group').hide(); // <-- hide all next

}

完整代码

var $select = $('#selectMe');

$(document).ready(function () {
    $select.change(function () {
        showHideDiv();
    });

    showHideDiv();
});

function showHideDiv() {

    var selectedVal = $select.val();
    $('#' + selectedVal ).prevAll('.group').show(); // <-- show all prev
    $('#' + selectedVal ).show();                   // <-- show current
    $('#' + selectedVal ).nextAll('.group').hide(); // <-- hide all next

}

根据选择的选项值显示div

7 个答案: