根據下拉菜單中選擇的數字創建多個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

由於用戶要求更改下拉菜單，因此我可以提供以下解決方案，該解決方案每次更改下拉菜單選擇時都會創建唯一的控件：

演示場

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

看到更新的演示

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

聚焦時，獲取輸入的值並附加克隆的元素：

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