根据下拉菜单中选择的数字创建多个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

由于用户要求下拉列表更改，我可以提供以下解决方案，每次下拉选项更改时都会创建唯一的控件：

<强> DEMO FIDDLE

<强> HTML

<div id="result"></div>

<强> JS

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

请参阅 UPDATED DEMO

Answer 2

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

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

#blockHolder {
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;