javascript - 如何在选择下拉菜单时动态创建文本框

Question

我是网络开发的新手，我正在使用 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>