如何使用jquery創建select的值的元素個數？

Question

我有以下兩個選擇標籤，我想根據它們的值顯示輸入標籤。

<select name="ticketId" id="myQty1"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<select name="ticketId" id="myQty2"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

所以，我想三個輸入標籤，如果有人從#myQty1和兩個值從#myQty2選擇一個值。我的輸出將如下所示：

<!-- participate #1 --> 
<input type="text" name="myQty1_parti1"/> 

<!-- Participate #2 --> 
<input type="text" name="myQty2_parti1"/> 
<input type="text" name="myQty2_parti2"/> 

所以我該如何顯示這個？

Answer 1

您需要在選擇更改事件時創建目標輸入。在select onchange中，迭代創建輸入等於select的值。

$("#myQty1").change(function(){ 
 
    $("#myQty1_result").empty(); 
 
    for (var i = 1; i <= $(this).val(); i++){ 
 
     $("#myQty1_result").append('<input type="text" name="myQty1_parti'+i+'"/>'); 
 
    } 
 
}); 
 
$("#myQty2").change(function(){ 
 
    $("#myQty2_result").empty(); 
 
    for (var i = 1; i <= $(this).val(); i++){ 
 
     $("#myQty2_result").append('<input type="text" name="myQty2_parti'+i+'"/>'); 
 
    } 
 
});

#myQty1_result > input { 
 
    border: 1px solid blue; 
 
} 
 

 
#myQty2_result > input { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="ticketId" id="myQty1"> 
 
    <option value="0">0</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<select name="ticketId" id="myQty2"> 
 
    <option value="0">0</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<div id="myQty1_result"></div> 
 
<div id="myQty2_result"></div>

可以使代碼簡單的像底部代碼：

$("select").change(function(){ 
    $("#"+this.id+"_result").empty(); 
    for (var i = 1; i <= $(this).val(); i++){ 
     $("#"+this.id+"_result").append('<input type="text" name="'+this.id+'_parti'+i+'"/>'); 
    } 
});