Output Number of Divs based on Quantity Selected from Select Menu

Question

I have a select menu that is used for selecting the quantity of jerseys desired.

<select name="jerseys" class="mobile">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Based on the quantity selected, I would like to output that same number of a specific div class called "block". For example, if "2" is selected, 2 divs of the same class show like this:

<div class="block">
Jersey #1 Info: 
<select name="jersey_one_size">
<option>S</option>
<option>M</option>
<option>Large</option>
</select>
</div>

<div class="block">
Jersey #2 Info: 
<select name="jersey_two_size">
<option>S</option>
<option>M</option>
<option>Large</option>
</select>
</div>

Would also like to output the text "Jersey #1 Info" "Jersey #2 Info" dynamically as well as select names "jersey_one_size" "jersey_two_size" etc.

I know I could do it manually this way:

$('select[name=jerseys]').change(function() {
    if ($(this).val() == '1') {
      // show .block1
    }
});

But how dynamically?

What seems to be a problem? I assume they all have the same parent with a known name and/or id, right? — PM 77-1, Aug 06 '14 at 00:05
this is an excellent description of what you want, however "not sure where to go from here" seems inappropriate as you don't appear to have gone anywhere to begin with. have you actually tried anything? — PlantTheIdea, Aug 06 '14 at 00:08

Kyi Kyi Thant · Accepted Answer · 2014-08-06T02:13:23.723

I use simple javascript.

<html>
<head>
    <script language="javascript">
        function slchange(){
            //alert("onchange");
            var e = document.getElementById("jerseys");
            var jval = e.options[e.selectedIndex].value;
            document.getElementById('desc').innerHTML = "";
            for(var i=0;i<jval;i++){
                var element = document.createElement("div");
                element.className = 'block';
                element.innerHTML = 'Jersey #'+(i+1)+' Info:<select name="jerseys_'+i+'_size" ><option>S</option><option>M</option><option>L</option></select>';
                document.getElementById('desc').appendChild(element);
            }
        }
    </script>
</head>
<body>
    <select id="jerseys" name="jerseys" class="mobile" onchange="slchange();">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
    <div id="desc"></div>
</body>
</html>

this works... except each time you choose a new option, it adds to it rather than resetting.. — cpcdev, Aug 06 '14 at 02:02

score 0 · Answer 2 · edited May 23 '17 at 12:11

First, give your select an id that we can identify it by:

<select id="SOME_NAME" name="jerseys" class="mobile">
    <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 class="block">
   <span>Jersey #2 Info:</span> 
   <select name="jersey_two_size">
      <option>S</option>
      <option>M</option>
      <option>Large</option>
   </select>
</div>

Then do this:

$('#SOME_DIV_NAME').hide();
$('#SOME_NAME').change(function() {
  $( "#SOME_DIV_NAME" ).show();
  $("#SOME_DIV_NAME span").text("Jersey #"+ $( "#SOME_NAME option:selected" ).text() + " Info:");
  $("#SOME_DIV_NAME 
});

Heres the fiddle

And also look here on how to change the option values, as i will never do all the work.

Output Number of Divs based on Quantity Selected from Select Menu

2 Answers2