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选项时需要创建目标输入。在select onchange中，迭代创建的输入等于select的值。

value && value.__esModule && value.default || value

$("#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>

如何使用jQuery创建select的元素值？

1 个答案: