javascript - 无法在表列中可用的下拉列表中显示动态值

标签 javascript jquery html

我有一个简单的 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/

相关文章:

javascript - 执行通过ajax加载的内联js

HTML 和 CSS 多层下拉菜单,需要悬停着色方面的帮助

javascript - 这个 javascript 正则表达式代码在处理 URLS 时做了什么?

javascript - 如何将缓存中的文件与服务器中的文件进行比较

javascript - 在列表的最后一项之前添加一个节点

javascript - 如何处理单击 D3.js 按钮时的数据过滤?

javascript - 如何在 'toggle' 在 JQuery 中单击页面上的多个元素?

javascript - 当窗口从中间滚动到底部时 Plax.js 不工作

javascript - 带有 javascript 的 HTML 未在 android webview 中加载

Javascript - 在加载时分配 img ID