無法在表格列的下拉列表中顯示動態值

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');首先，為了通過id成功$.each() ，您將需要將它們作為array而不是string傳遞。

由於您具有jQuery，因此建議您使用$(document).ready(function(){}); 像這樣：

編輯：忘記提及，當您第一次調用$.each()函數時，回調函數需要index和value的參數，因此如果您要選擇的話，您可以將它們作為key => value對進行迭代。去做。 否則，您可以僅在option-build中使用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 個解決方案

解決方案1
1 2018-11-14 18:49:55

解決方案2
0 2018-11-14 18:34:55

無法在表格列的下拉列表中顯示動態值

問題描述

2 個解決方案

解決方案1 1 2018-11-14 18:49:55

解決方案2 0 2018-11-14 18:34:55

解決方案1
1 2018-11-14 18:49:55

解決方案2
0 2018-11-14 18:34:55