如何在选择下拉框时显示多个div元素？

Question

假设：

<select id="itemsPage"> 
    <option value="1">12 items per page</option> 
    <option value="2">View All</option> 
    </select> 

有div元素像数：

<div class="item first"> 
          <img src="../img/products/doll_170.jpg" alt="Doll" /> 
          <p class="headline">Sale!</p> 
          <p class="itemName">Snowboard Outfit + Gear</p> 
          <p class="itemPrice"><span class="was">$28</span> $22</p> 
          <p class="rating"><span class="five"></span></p> 
          <p class="backordered">Backordered until Dec. 18, 2012</p> 
</div> 

现在已经有20个项目是这样。当我从下拉框中选择“查看全部”时，我想在显示12个项目时选择“每页12项”，并且想要显示所有20个项目。

Answer 1

请与jQuery，然后选择它们：

http://api.jquery.com/length/

或

http://api.jquery.com/size/

他们似乎等同。不知道你是否有更大的事件问题。让我们知道。

Answer 2

您需要在change()事件上获取<select>值，然后检查值== 1是否显示12个项目，如果值== 2显示所有20个项目。

$('#itemsPage').change(function() { 
    var val = $(this).val(), 
     $item = $('.item'); 

    if (val == 1) { 
     $item.eq(11).nextAll().hide();//item index higher than 12 will be hidden 
    } else if (val == 2) { 
     $item.show();//show all 20 items 
    } 
}) 

检查此jsfiddle。

Answer 3

试试这个代码以实现所需的功能 -

$('body').on('change', '#itemsPage', function(){ 
$('div.item').hide(); //first hide all elements 
if($(this).val() == 1){ 
    $('div.item:lt(12)').show(); //12 to display first 12 elements of one kind 
}else{ 
    $('div.item').show(); 
} 
}); 

检查它的小提琴 - Click for demo

Answer 4

有可能是一些更简单的方法，但我只是写一些代码什么应该肯定的工作。

此函数用于显示每页显示的项目数以及要操作的项目数组。第一个循环使所有元素不可见，并且后面的循环使前几个元素再次可见（其余部分不可见）。

function hideAllListElems(list) { 
     list.classList.add('hideList'); 
    } 

function showListElems(list) { 
     list.classList.remove('hideList'); 
    } 

function showList(start, end) { 
    var listsDomElements = document.querySelectorAll('#list li'); 
    var i; 
    start = start || 0; 

    hideAllListElems(); 
    for(i = start; i < end; i++) { 
     showList(listDomElements[i]); 
    } 
}