Question

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

Answer 1

要使所有下拉菜单的值均为“ Test Product”，请使用以下代码，您无需为此进行循环。

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

Answer 2

我认为您遇到的问题是如何初始化数据body onload="populateSelect('TestProduct');首先，为了成功$.each()遍历id，您需要传递它们是array而不是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>

无法在表格列的下拉列表中显示动态值

2 个答案: