根据下拉菜单中选择的数字创建多个 div

Question

所以我有一个下拉菜单，人们可以在其中选择他们拥有的商店数量。基于此选择，我需要为每个位置创建一个包含商店信息的 div。

例如，如果他们选择 3 家商店，则会显示三个相同的 div，供他们填写每个商店。

这是我的输入和 div 代码。

<input form='form1' type='number' name='numberOfLocations' 
    id='numberOfLocations' size="2" maxlength="2" />
<div class='businessSpecifics'>
    <label>URL Extension:</label>
    <br>
    <input form='form1' type='text' name='urlExtension' 
        placeholder="businessname" id='businessSpecificsURL' 
        class='businessSpecifics details' /><span>.byMyCompany.com</span>
    <br>
    <label>Login Email:</label>
    <br>
    <input form='form1' type='email' name='email' 
        placeholder='email' id='businessSpecificsEmail' 
        class='businessSpecifics details' />
    <br>
    <label>Password:</label>
    <br>
    <input form='form1' type='password' name='tempPswd' 
        placeholder="" 
        class='businessSpecifics details' />
    <br>
    <label>Business Website:</label>
    <br>
    <input form='form1' type='text' name='bussinessWebsite' 
        placeholder="Business Website" 
        class='businessSpecifics details' />    
</div>

Answer 1

$(function(){
  $("#numberOfLocations").change(function(){
       var value = $(this).val();
       $(".blockContainer").empty();
       for(var i = 0; i<value; i++){
            var block = $("<div>",{class:"block"});
            $(block).append($("div.businessSpecifics").html());
            $(".blockContainer").append(block);
         }
    }); 
  
 });

div.businessSpecifics{
  display:none;    
}
.block{
  width:160px;
  height:200px;
  border:solid 1px black;
  margin:10px;
  box-shadow:0px 0px 7px #000;
  padding:5px;
  position:relative;
  float:left;
  }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<input  type='number' name='numberOfLocations' id='numberOfLocations' size="2" maxlength="2" />
<div class="blockContainer"></div>
<div class='businessSpecifics'>
    <label>URL Extension:</label>
    <br>
    <input  type='text' name='urlExtension' 
        placeholder="businessname" id='businessSpecificsURL' 
        class='businessSpecifics details' /><span>.byMyCompany.com</span>
    <br>
    <label>Login Email:</label>
    <br>
    <input  type='email' name='email' 
        placeholder='email' id='businessSpecificsEmail' 
        class='businessSpecifics details' />
    <br>
    <label>Password:</label>
    <br>
    <input  type='password' name='tempPswd' 
        placeholder="" 
        class='businessSpecifics details' />
    <br>
    <label>Business Website:</label>
    <br>
    <input  type='text' name='bussinessWebsite' 
        placeholder="Business Website" 
        class='businessSpecifics details' />    
</div>

Answer 2

由于用户要求更改下拉菜单，我可以提供以下解决方案，每次更改下拉菜单选择时创建唯一控件：

DEMO FIDDLE

HTML

<select id="selectStores" >
    <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>

JS

$(document).ready(function(){
$("#selectStores").change(function(){
   $('.businessSpecifics').remove();
    var number=$("#selectStores option:selected").text();
    var htmlToInsert="";
    for(var i=1;i<=number;i++)
    {
       htmlToInsert='<div class="businessSpecifics">'
    +'<label>URL Extension '+i+':</label>'
    +'<br> <input form="form'+i+'" type="text" name="urlExtension" placeholder="businessname" id="businessSpecificsURL" class="businessSpecifics details" />'
    +'<span>.byMyCompany.com</span>'
    +'<br><label>Login Email '+i+':</label>'
    +'<br><input form=form="form'+i+'" type="email" name="email" placeholder="email" id="businessSpecificsEmail" class="businessSpecifics details" />'
    +'<br><label>Password '+i+':</label>'
    +'<br><input form=form="form'+i+'" type="password" name="tempPswd" placeholder="" class="businessSpecificsdetails "/>'
    +'<br><label>Business Website '+i+':</label>'
    +'<br><input form=form="form'+i+'" type="text" name="bussinessWebsite" placeholder="Business Website" class="businessSpecifics details" />'
    +'</div><br/><br/>'; 
       $(htmlToInsert).insertAfter("#selectStores");
     }
});
});

见UPDATED DEMO

Answer 3

在聚焦时，获取输入的值并附加克隆的元素：

$('#numberOfLocations').on('focusout', function() {
  var that = $(this);
  var val = that.val(); 
  for (i=1;i<=val;i++) {
    var c = $('.businessSpecifics').not('.cloned').clone().addClass('cloned');  
    $('#blockHolder').append(c);
  }
});

.businessSpecifics:not(.cloned) {  
  display: none;
 }

.businessSpecifics.cloned { 
  border: 1px solid #d8d8d8;
  padding: 10px;
}

#blockHolder {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input form='form1' type='number' name='numberOfLocations' id='numberOfLocations' size="2" maxlength="2" />
<div id="blockHolder" />
<div class='businessSpecifics'>
                    <label>URL Extension:</label>
                    <br>
                    <input form='form1' type='text' name='urlExtension' placeholder="businessname" id='businessSpecificsURL' class='businessSpecifics details' /><span>.byMyCompany.com</span>
                    <br>
                    <label>Login Email:</label>
                    <br>
                    <input form='form1' type='email' name='email' placeholder='email' id='businessSpecificsEmail' class='businessSpecifics details' />
                    <br>
                    <label>Password:</label>
                    <br>
                    <input form='form1' type='password' name='tempPswd' placeholder="" class='businessSpecifics details' />
                    <br>
                    <label>Business Website:</label>
                    <br>
                    <input form='form1' type='text' name='bussinessWebsite' placeholder="Business Website" class='businessSpecifics details' />

                </div>