无法在表格列中可用的下拉列表中显示动态值答案

【问题标题】：unable to show dynamic value in the dropdown list available in the table column无法在表格列中可用的下拉列表中显示动态值
【发布时间】：2018-11-14 18:22:06
【问题描述】：

我有一个包含多行的简单 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”。

【问题讨论】：

$.each 接受一个数组/对象，'TestProduct' 是一个字符串

标签： javascript jquery html

【解决方案1】：

要让所有下拉菜单的值为“测试产品”，请使用以下代码，您不需要为此使用循环。

function populateSelect(ids) {
    var productDropdown = $(".dropdown select");
    console.log("productDropdown va " + productDropdown);
    $(`<option>${ids}</option>`).appendTo(productDropdown);
}

【讨论】：

【解决方案2】：

我认为您遇到的问题是您初始化数据的方式body onload="populateSelect('TestProduct'); 首先，为了通过 id 成功 $.each()，您需要将它们作为 @ 传递987654325@ 而不是string。

既然你有 jQuery，我建议你像这样使用$(document).ready(function(){});：

编辑：忘了说当你第一次调用你的$.each()函数时，回调函数需要index和value的参数，所以你可以遍历它们为key => value 如果您选择这样做，则配对。否则，您可以在选项构建中使用 value 参数，例如：

var option = '<option value="'+value+'">'+value+'</option>';

function populateSelect(ids) {
    console.log(ids);
    var productDropdown = $(".product");
    //console.log("productDropdown va " + productDropdown);
    $.each(ids, function(index, value) {
        var option = '<option value="'+index+'">' + value + '</option>';
        $.each(productDropdown, function(){
            $(this).append(option);
        });
    });
}
$(document).ready(function(){
    populateSelect(['TestProduct', 'TestProduct2']);
});

此外，您为每个下拉菜单使用了非唯一 ID #product。 ID 应该是唯一的，所以我使用.product 作为一个类来编写代码。新的 HTML：

<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" class="product">
                     <option value=""> </option>
                     </select>
          </td>
      </tr>
      <tr>
         <td>200</td>
         <td class="dropdown">
                  <select name="filter_for" class="product">
                     <option value=""> </option>
                     </select>
          </td>
      </tr>
      <tr>
         <td>300</td>
         <td class="dropdown">
                  <select name="filter_for" class="product">
                     <option value=""> </option>
                     </select>
          </td>
      </tr>
      <tr>
         <td>400</td>
         <td class="dropdown">
                  <select name="filter_for" class="product">
                     <option value=""> </option>
                     </select>
          </td>
      </tr>
    </tbody>
</table>

【讨论】：

请查看更新后的代码演示plnkr.co/edit/3J4mJqznsIY7rEVtvvqG?p=preview。该值显示在表的下拉列表中的引用中。不显示下拉列表中的引号的任何输入。
我认为这篇 stackoverflow.com/questions/16598477/… 的帖子会帮助你解决这个问题！