如何在选择下拉列表时动态创建文本框

Question

我是 Web 开发的新手，我正在使用 Bootstrap 开发 HTML 表单。所以我有一个如下所示的 div：

 <div class="form-group">
      <label class="col-md-4 control-label" >Users</label> 
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
    <select name="state" class="form-control selectpicker" >
          <option value=" " >Please select the number of users</option>
          <option>1</option>
          <option>2</option>
          <option >3</option>
        </select>
    </div>
  </div>
</div>

因此，根据数字的选择，我想动态创建如下 div 所示的文本框。

<div class="form-group">
  <label class="col-md-4 control-label">Username</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input name="phone" placeholder="Username" class="form-control" type="text">
    </div>
  </div>
</div>

例如，如果他选择 1，则应出现一个文本框，如果选择 2，则应出现 2。感谢任何帮助。

Answer 1

尝试这个

 $('.selectpicker[name=state]').change(function() { var i = 0; //$('.input-group').children('input').remove() *for reset the inbox on change* while (i < parseInt($(this).val())) { $('.input-group').append('<input name="phone" placeholder="Username" class="form-control" type="text">') i++; } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label class="col-md-4 control-label">Users</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span> <select name="state" class="form-control selectpicker"> <option value=" " >Please select the number of users</option> <option>1</option> <option>2</option> <option >3</option> </select> </div> </div> </div>