У меня есть цикл 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>
Здесь есть несколько проблем. Во-первых, в вашем jQuery используйте
$(this).find("option:selected").val()
вместо
$("select option:selected").val()
Во-вторых, вы создаете несколько элементов div
с одинаковым идентификатором ("текст"). У вас может быть только один ID в DOM. Избавьтесь от идентификатора этого элемента. Возможно, замените его каким-то идентифицируемым классом, если хотите.
Итак, как вводить новый контент в divs сейчас? Используйте $(this).next().html(str);
Наконец, закройте свой элемент select
перед div
.
…
<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>