我有一个简单的 html 表,其中包含多行,其中一列具有下拉列表,应动态填充值。 我的代码在显示表中下拉列表中的值时存在一些问题,我想在“选择产品”列下显示的所有下拉列表中显示相同的值。
演示链接:http://plnkr.co/edit/roklRKCLjjVeOPe1df4m?p=preview
示例代码如下:
// Populate the dropdown with the value
function populateSelect(ids) {
var productDropdown = $("#product");
console.log("productDropdown value : " +productDropdown);
$.each(ids, function() {
$("<option />").appendTo(productDropdown);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="populateSelect('TestProduct')">
<table id="productTable" border="1">
<thead>
<tr>
<th>PID</th>
<th>Select Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td class="dropdown">
<select name="filter_for" id="product">
<option value=""> </option>
</select>
</td>
</tr>
<tr>
<td>200</td>
<td class="dropdown">
<select name="filter_for" id="product">
<option value=""> </option>
</select>
</td>
</tr>
<tr>
<td>300</td>
<td class="dropdown">
<select name="filter_for" id="product">
<option value=""> </option>
</select>
</td>
</tr>
<tr>
<td>400</td>
<td class="dropdown">
<select name="filter_for" id="product">
<option value=""> </option>
</select>
</td>
</tr>
</tbody>
</table>
</body></html>
注意:在上面的代码中,我尝试在“选择产品”列中显示的所有下拉列表中显示值“TestProduct”。
最佳答案
要使所有下拉菜单的值均为“测试产品”,请使用以下代码,您不需要为此使用循环。
function populateSelect(ids) {
var productDropdown = $(".dropdown select");
console.log("productDropdown va " + productDropdown);
$(`<option>${ids}</option>`).appendTo(productDropdown);
}
关于javascript - 无法在表列中可用的下拉列表中显示动态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53306538/