如何動態地在下拉

Question

我相信新的Web開發的選擇創建文本框，我使用Bootstrap.So開發形式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>