javascript - 如何使用 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+'"/>');
    }
});