使用選擇選項標簽動態添加輸入字段

Question

我正在嘗試使用jQuery代碼為用戶生成簡歷。 我正在嘗試的是，用戶單擊選擇標簽，然后根據輸入字段的選擇數量，選擇了o年經驗選項。 例如：companyname1，location1或companyname2，location2。

腳本：

<script> 
 $(docment).ready(function(){
     $("#experienceNo").on("change",function(){
     var numInputs = $(this).val();
     $('#experienceSection').html('');
     for(var i=0; i < numInputs; i++)
     {
         var j = i*1;
         $('<div class="form-group"><label for="" class="col-4 col-form-label">Company Name '+j+'</label><div class="col-6"><input type="text" name="companyname[]" class="form-control" required></div></div>');
     }
   });
 });
 </script>

HTML：

<h4>Experience Section</h4>
<div class="form-group row">
  <label for="experienceNo" class="col-4 col-form-label"> No of company add for experience</label>
  <div class="col-6">
    <select name="experienceNo" id="experienceNo" class="custom-select mb-2 mr-sm-2 mb-sm-0"> 
    <option value="">Select Value</option>`enter code here`
    <option value="0">0</option>
    <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>
    </div>
  </div>
 <div id="experienceSection"></div>
 <div class="form-group row"> 
 <div class="col-6"> 
 <button type="submit" name="genrate" class="btn btn-
 primary">Genrate</button>

Answer 1

以下代碼將對您有所幫助，

 $(document).ready(function(){ $("#experienceNo").on("change",function(){ var numInputs = $(this).val(); $('#experienceSection').html(''); for(var i=0; i < numInputs; i++) { var j = i*1; var $section = $('<div class="form-group"><label for="" class="col-4 col-form-label">Company Name '+j+'</label><div class="col-6"><input type="text" name="companyname[]" class="form-control" required></div></div>'); $('#experienceSection').append($section); } }); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <h4>Experience Section</h4> <div class="form-group row"> <label for="experienceNo" class="col-4 col-form-label"> No of company add for experience</label> <div class="col-6"> <select name="experienceNo" id="experienceNo" class="custom-select mb-2 mr-sm-2 mb-sm-0"> <option value="">Select Value</option>`enter code here` <option value="0">0</option> <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> </div> </div> <div id="experienceSection"></div> <div class="form-group row"> <div class="col-6"> <button type="submit" name="genrate" class="btn btn- primary">Genrate</button> 

確保需要將每個動態創建的div附加到experienceSection

Answer 2

i am trying this code but i still not get output.

這里是：

 Script:
     $(document).ready(function(){
     $("#experienceNo").on("change",function(){
     var numInputs = $(this).val();
     $('#experienceSection').html('');
     for(var i=0; i < numInputs; i++)
     {
         var j = i*1;
         var $section =$('<div class="form-group"><label for="" class="col-4 
         col-form-label">Company Name '+j+' </label><div class="col-6"><input 
         type="text" name="companyname[]" class="form-control" required></div>
         </div> 
         <div class="form-group"><label for="" class="col-4 col-form-
         label">Location '+j+' </label><div class="col-6"><input type="text" 
         name="location[]" class="form-control" required></div></div><hr>');

     $('#experienceSection').append($section);
      }
   });
 });

 HTML:
  <form>
  <h4>Experience Section</h4>
  <div>
  <label> No of company add for experience</label>
  <select name="experienceNo" id="experienceNo"> 
  <option value="">Select Value</option>
  <option value="0">0</option>
  <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>
 </div>
 <div id="experienceSection"></div>
 <div> 
 <button type="submit" name="genrate" class="btn btnprimary">Genrate</button>
</div>