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

时间:2014-05-01 18:36:58

标签: javascript php jquery foreach

我有一个PHP Foreach循环,其中包含" Quantity"输入。用户可以选择数量,然后选择的数量应显示所选的新输入数量。如果我选择数量的" 3"然后应该为该项目显示3个新输入。记住,我有一个forreach循环所以我有多个项目。

截至目前,我的代码仅用于显示FIRST项目的新输入数量。我需要它来为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>

2 个答案:

答案 0 :(得分:1)

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

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

而不是

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

其次,您要创建具有相同ID('text')的多个div元素。您只能在DOM中拥有一次ID。摆脱该元素的ID。如果你愿意,可以用一些可识别的类替换它。

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

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

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

答案 1 :(得分:1)

首先,您需要关闭</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>