CODEWITHSUNDEEP
javascriptjqueryhtml
user1225946
user1225946

Reputation: 33

Create div based on selected drop down value

I want to create one or more div dynamically based on selected values in dropdown.

HTML code:

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="10">10</option>
</select>

If I select 2 from the dropdown means, two div will create, if I select 10 means 10 div will create. How can I do this?

Upvotes: 0

Views: 4258

Answers (4)

Satish Sharma
Satish Sharma

Reputation: 9635

try this

HTML

<select onchange="javascript:create_div(this.value);" id="my_select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="10">10</option>
</select>

<div id="div_main"></div>

add onchange funciton in select and a div_main in which you want to insert divs

JS Script

<script>
function create_div(num)
{
        alert("hi");
        alert(num);
      var html = "";  

      for(var i=1; i<=num; i++)
      {
          html += '<div id="div'+i+'">This is Div No - '+i+'</div>';    
      }  

    document.getElementById('div_main').innerHTML = html;
}
</script>

use above js script to create dynamic div

See JS Fiddle

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

HTML

<select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="10">10</option></select>
<span id="test">
    //Here your Dynamic Divs Whenver Select Changes
</span>

Script

$('select').on('change',function(){
    var value=$(this).val();
    var output='';
    for(var i=1;i<=value;i++)
    {
     output+='<div>Your Text</div>'   
    }
    $('#test').empty().append(output);
});

DEMO

Upvotes: 0

Rohan
Rohan

Reputation: 3332

Simple :)

var val,html = $('samplediv').clone().html(); //store the html to be appended in a sample div
$('select').change(
  val = $(this).val();
  for(i=0;i<val;i++)
  {
    $(this).after(html);
  }
);

Upvotes: 0

adeneo
adeneo

Reputation: 318202

$('select').on('change', function() {
    $('#result').empty();
    $.each(new Array(+this.value), function(i) {
        $('<div />', {
            text : 'this is div nr : '+(i+1)
        }).appendTo('#result');
    });
});

FIDDLE

Upvotes: 2

Related Questions