根据选定的下拉值创建div

Question

我想根据下拉列表中的选定值动态创建一个或多个div 。

HTML代码：

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

如果我从下拉菜单中选择2，则会创建两个div ，如果我选择10表示将创建10个div。 我怎样才能做到这一点？

Answer 1

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

小提琴

Answer 2

简单:)

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

Answer 3

尝试这个

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>

脚本

$('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

Answer 4

尝试这个

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>

在select中添加onchange函数和在其中插入div的div_main

JS脚本

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

使用上面的js脚本来创建动态div

见JS小提琴