显示PHP Foreach循环中基于select的更多输入 - Show more inputs based on select in PHP Foreach Loop

我有一个PHP Foreach循环，其中包含一个"Quantity"输入。用户可以选择一个数量，然后选择的数量应该显示新输入的选定数量。如果我选择数量为"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>

这里有很多问题。首先，在jQuery中使用

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

不是

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

其次，您正在创建具有相同ID ('text')的多个div元素。在DOM中只能有一次ID。去掉那个元素的ID。如果你愿意，可以用一些可识别的类来替换它。

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

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

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

首先需要关闭</select>。然后不要使用ID选择器的文本，因为它应该只被引用一次。最后使用$(this)使你的jQuery相对。

<?php
$rows = array(array('appareltype'=>'hat,gloves,earmuffs,socks,jumper'));
foreach($rows as $row) {
                 $appareltype = $row['appareltype'];
             echo $appareltype;
                   $apparel = explode(",", $appareltype);
                print_r($apparel);
                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>
</select>
  <div class="text">
</div>
                    <?
                }
        }
                 ?>
                     <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
                     <script type="text/javascript">
$("select.quantity").change(function () {
  var str = "";
  //var count = Number($(this).("select option:selected").val())
  var count = Number($(this).val());
  for (var i = 1; i <= count; i++) {
      str += '<div class="oneinput"> <label>' + i
              + "</label> <input name='" + i + "' class='form-control'>"
              + "</div>";
  }
  $(this).next(".text").html(str);
});
</script>