根据下拉菜单中选择的数字创建多个Div [英] Creating Multiple Divs Based on Number Chosen in Drop Down Menu

问题描述

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

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.

例如，如果他们选择3家商店，则将出现三个相同的div，以便他们为每个商店填写.

For example if they choose 3 stores then three identical divs will show up for them to fill out for each store.

这是我的输入和div代码.

Here is my code for the input and the 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:

演示场

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

请参见 更新后的演示

See the UPDATED DEMO

这篇关于根据下拉菜单中选择的数字创建多个Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！