javascript - 根据 PHP Foreach 循环中的 select 显示更多输入

Question

我有一个包含“数量”输入的 PHP Foreach 循环。用户可以选择一个数量，然后选择的数量应显示所选的新输入数量。如果我选择数量“3”，则该项目应出现 3 个新输入。请记住，我有一个 forreach 循环，因此我有多个项目。

到目前为止，我的代码只能显示第一个项目的新输入数量。我需要它适用于 forreach 循环中的每个项目。请参阅下面的代码:

foreach($rows as $row) {
                 $appareltype = $row['appareltype'];
                    $apparel = explode(",", $appareltype);
                    foreach($apparel as $datapparel) {
                        ?>
                            <b><? echo $datapparel ?></b><br>
                            Quantity: <select name="quantity[]" class="form-control quantity">
                            <option value="0" selected="selected">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>

                            <div id="text">

                            </div>

                        <?
                    }

            }
                     ?>

jQuery:

<script type="text/javascript">
$("select.quantity").change(function () {
  var str = "";
  var count = Number($("select option:selected").val())
  for (var i = 0; i < count; i++) {
      str += '<div class="oneinput"> <label>' + i
              + "</label> <input name='" + i + "' class='form-control'>"
              + "</div>";
  }

  $("#text").html(str);
});
</script>

Answer 1

这里有多个问题。首先，在您的 jQuery 中，使用

$(this).find("option:selected").val()

而不是

$("select option:selected").val()

其次，您要创建多个具有相同 ID(“文本”)的 div 元素。在 DOM 中您只能拥有一次 ID。删除该元素上的 ID。如果您愿意，可以将其替换为一些可识别的类。

那么现在如何将新内容注入(inject)到div中呢？使用 $(this).next().html(str);

最后，关闭 div 之前的 select 元素。

…
    <option value="20">20</option>
</select>
<div class="something"></div>