显示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>
相关文章:
- 如何对jQuery屏蔽文本输入执行.select()
- 在JavaScript中捕获select(下拉列表)上的键输入
- 如何将html中select选项的输入与javascript一起使用
- 在select元素中添加和删除提交的输入值
- 添加一个具有select大小的输入文本
- 使用基于输入类型 = radio/checkbox/select 的 jQuery 进行验证
- jqueryui对话框无法在firefox 11中“select()”输入
- jQuery获取更新的select输入的值
- jqueryhtml操作不适用于select输入
- 加载DOM后,如何使用jQuery从Select输入中获取值
- 更新data.table中的select输入值
- 使用JavaScript更改Select输入的值
- PHP, MYSQL + javascript?生成基于三个用户SELECT输入的结果(price)
- 可以'当第一个select的值改变时,让jquery设置select输入的值
- 目标标签没有相邻的"select"输入
- JQuery -只比较select输入中所有选项的一部分文本,并选择匹配的那个
- 从react中映射的select输入中获取选定值
- 在ajax调用后填充额外的select输入
- 使用带有select输入的FileReader
- 在select输入时多次调用select2()会使其消失