Показать/скрыть дивы на основе выбора значения

Question

Я хочу выпадающий список выбора меню, чтобы показать текстовые поля на основе значения:

var showDiv = function(goal){ 
    var count = 1; 
    $('.myDIV').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()) 
}); 

Я пытаюсь, но это не работает, вот это - http://jsfiddle.net/jdveR/

Чего я хочу;

Если выбрать 1; show 1 div Если выбрать 2; показать 1 и 2 div Если выбрать 3; шоу 1, 2 и 3 div идут так.

Любая помощь действительно оценена. Thanks

Answer 1

Вы можете использовать селектор :lt(). Вы не должны перебирать элементы в первую очередь.

Это выберет divs на основе индекса div.

var showDiv = function (goal) { 
    $('.myDIV').hide(); 
    $('.myDIV:lt(' + goal + ')').show(); 
}; 

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

Check Fiddle

Answer 2

Что-то вроде этого: http://jsfiddle.net/jdveR/10/

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

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

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

Answer 3

Если вы хотите сохранить свои данные отдельно от дизайна, то вы можете попробовать добавить data-goal="x" к вашей диве и изменение JavaScript к настоящему времени:

HTML:

<div class="myDIV" id="div1" data-goal="1">Div1</div> 
<div class="myDIV" id="div2" data-goal="2">Div2</div> 
<div class="myDIV" id="div3" data-goal="3">Div3</div> 
<div class="myDIV" id="div4" data-goal="4">Div4</div> 
<div class="myDIV" id="div5" data-goal="5">Div5</div> 

Javascript

var showDiv = function(goal){ 
    $('.myDIV').hide().each(function(){ 
     if($(this).attr('data-goal') <= goal) 
     $(this).show(); 
    }); 
}; 

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

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