Show items based on form input

Question

Check out the following simplified code:

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

I want to achieve this: if the user selects the "2" option from the drop-down list, I want to show (make visible) the first two divs. If the user selects "4", I want the first four divs to be visible, etc. Etc.

What is the best way to write a jQuery function so that it is very short, efficient, and scalable (the function remains unchanged even if I increase it from 5 to 30 options)?

Answer 1

 var $sections = $('.section'); $('#number').change(function(){ var value = $(this).val(); $sections.hide(1, function(){ $sections .slice(0, value) .show(); }); }); 

Demo

Answer 2

What about:

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

Example: http://jsfiddle.net/cVjtv/

Notes:

• bind event handler for the change event of the select#number element.
• Uses .hide() , and the attribute starts with a selector to hide all div starting with "show"
• Loops from 1 to n inclusive, where n is the value selected in the select element, hiding the corresponding div at each iteration.

Update: Here's a more concise (but less readable) version, like @ 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'}) }) 

here: http://jsfiddle.net/Gyx9D/

Answer 4

Personally, I remove the identifier from the div (maybe apply a class if you want the selector to be a little more specific) and wrap them in the parent (let me call it target). From there, you can display only the first n child divs using a simple function. Thus, the structure:

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

You can use the following to bind a selection change and hide / show divs:

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