Javascript 添加基于 select 选项的元素

Question

基本上，我有一个 select 选项

<div class="col-lg-6 pl-2">
   <div class="form-input-div">
      <select onchange="addForm()" class="form-control">
         <option>Number of guest to join</option>
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
      </select>
   </div>
</div>

我想要的是根据选项添加一个新的表单/输入字段。 例如，我将 select 4在菜单中添加 4 个输入字段，当我将其更改为2时，它将删除其他两个，依此类推..

这是我的 UI，带有 2 个 static 输入字段。

两个 static 输入字段元素

   <div class="row" id="guestDetails">
      <div class="col-lg-6">
         <h5>Guest Detail 1</h5>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Name">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Phone">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Email">
         </div>
         <div class="form-input-div address-guest">
            <textarea class="form-control" placeholder="Enter Mailing Address"></textarea>
         </div>
      </div>
      <div class="col-lg-6">
         <h5>Guest Detail 2</h5>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Name">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Phone">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Email">
         </div>
         <div class="form-input-div address-guest">
            <textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
         </div>
      </div>
   </div>
</div>

编辑：我尝试的是这个

<script>
   function addForm(){
     // alert ('hello')
     var element = document.getElementById('guestDetails');
     element.innerHTML +=  `<div class="col-lg-6">
                     <h5>Guest Detail 1</h5>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Name">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Phone">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Email">
                     </div>
                     <div class="form-input-div address-guest">
                       <textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
                     </div>
                   </div>`;
   }
</script>

但我不知道如何删除其他行，例如我会将值从 4 更改为 1

Answer 1

您可以使用 for 循环并运行该循环直到选择框的值，并且在此循环内仅 append 新 div。

演示代码：

 function addForm(values) { var element = document.getElementById('guestDetails'); element.innerHTML = "" //empty //loop till select values for (var i = 1; i <= parseInt(values); i++) { element.innerHTML += `<div class="col-lg-6"> <h5>Guest Detail ${i}</h5> <div class="form-input-div"> <input type="text" class="form-control " placeholder="Enter Name"> </div> <div class="form-input-div"> <input type="text" class="form-control " placeholder="Enter Phone"> </div> <div class="form-input-div"> <input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)"> </div> <div class="form-input-div"> <input type="text" class="form-control " placeholder="Enter Email"> </div> <div class="form-input-div address-guest"> <textarea class="form-control " placeholder="Enter Mailing Address"></textarea> </div> </div>`; } }

 <div class="col-lg-6 pl-2"> <div class="form-input-div"> <.--pass here value--> <select onchange="addForm(this.value)" class="form-control"> <option>Number of guest to join</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> <div class="row" id="guestDetails"> </div>

Answer 2

您可以使用 jQuery 切换 Function。 除非您可以使用纯 javascript 进行自己的切换

 function elementBlock(elmOne,elmTwo,elmThree) { document.getElementById("one").style.display = elmOne document.getElementById("two").style.display = elmTwo document.getElementById("three").style.display = elmThree } function toogleDiv(val) { if (val == 1) { elementBlock('block','none','none') }else if (val == 2) { elementBlock('none','block','none') }else if (val == 3) { elementBlock('none','none','block') } } document.getElementById("selectOpt").addEventListener('change', function(e) { toogleDiv(e.target.value); })

 #one, #two, #three { display: none; }

 <select class="form-control" id="selectOpt"> <option>Number of guest to join</option> <option>1</option> <option>2</option> <option>3</option> </select> <div> <div id="one">one</div> <div id="two">two</div> <div id="three">three</div> </div>

首先，您必须不Display None所有表单输入，然后根据您的 select 值，您必须更改显示none以block

我刚刚为三个 div 创建了它 您可以包含任意数量的 div