[英]Creating Multiple Divs Based on Number Chosen in Drop Down Menu
So I have a drop down menu where people choose the number of stores they have. 因此,我有一个下拉菜单,人们可以在其中选择他们拥有的商店数量。 Based on this selection I need to create a div with store information for each location. 基于此选择,我需要创建一个div,其中包含每个位置的商店信息。
For example if they choose 3 stores then three identical divs will show up for them to fill out for each store. 例如,如果他们选择3个商店,则将出现三个相同的div,以便他们为每个商店填写。
Here is my code for the input and the 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>
Since the User has asked for dropdown change I have can provide the below solution which creates unique controls each time when the dropdown selection gets changed: 由于用户要求更改下拉菜单,因此我可以提供以下解决方案,该解决方案每次更改下拉菜单选择时都会创建唯一的控件:
HTML 的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 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");
}
});
});
See the UPDATED DEMO 看到更新的演示
$(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>
On focusout, get the value entered and append the cloned element: 聚焦时,获取输入的值并附加克隆的元素:
$('#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.