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

试试这个

＆＃13;

$('.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++;
  }
})

＆＃13;

<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>

＆＃13;

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

1 个答案: