使用选择选项标签动态添加输入字段

Posted 2023-02-24

【中文标题】使用选择选项标签动态添加输入字段

【英文标题】：Dynamically add input field with select option tag

【发布时间】：2018-07-25 21:01:36

【问题描述】：

我正在尝试使用 jQuery 代码为用户生成简历。我正在尝试的是，用户单击选择标签并选择一年经验选项，根据他们选择的输入字段数量是打开的。比如：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>

【问题讨论】：

现在你的问题是什么？顺便问一下，你知道j=i*1 和j=i 是一样的吗，那么在你使用j 的地方不如使用i？

【参考方案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

【讨论】：

@lucky nath 如果它适用，请接受它作为您的答案。

【参考方案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>