Показать DIV на основе выбора значения параметра

Question

У меня есть 5 дивы, например

<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> 

Тогда то, что я хочу сделать: когда «3» выбрано в элементе управления mySelect я хочу отображать первые 3 divs, когда выбрано «5», я хочу отобразить все div. Кроме того, начальное значение select равно, например, «2», а затем, когда страница загружается, я хочу отображать первые 2 div. Как я могу это достичь?

Answer 1

Если предположить, что дивы в порядке вариантов, вы можете использовать :lt() селектор JQuery предлагает:

$('.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. У этого есть (по моему мнению приятный) побочный эффект от того, чтобы не использовать идентификаторы вообще.

Answer 2

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');

Эта линия:

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

является довольно конденсируется, но она по существу делает то же самое, что код внутри функция $.change(), только короче.

Answer 3

$().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 4

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()); 
});