jqueryを使用してselectの値の要素番号を作成する方法は？

Question

私は次の2つの選択タグを持っており、それらの値に従って入力タグを表示したいと思います。だから、

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

誰かが#myQty2から#myQty1から一つの値と2つの値を選択した場合、私は3個の入力タグをしたいです。私のアウトは以下のようになります：

<!-- 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のイベントを変更する場合は、ターゲット入力を作成する必要があります。 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+'"/>'); 
    } 
});