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

Question

I have a simple html table with multiple rows and one of the column has the dropdown list which should populate the values dynamically. My code has some issue to show the value in the dropdown list in the table, i want to show same value in all the dropdown list shown under 'Select Product' column.

Demo link : http://plnkr.co/edit/roklRKCLjjVeOPe1df4m?p=preview

Sample code below:

 // 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> 

Note : In the above code i'm trying to show the value 'TestProduct' in all the dropdown's shown in the 'Select Product' column.

Answer 1

To have all the dropdowns with the value 'Test Product', use the following code, you don't need a loop for this.

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

Answer 2

I think the issue you're running into is with the way you're initializing the data body onload="populateSelect('TestProduct'); First of all, in order to successfully $.each() through the ids, you'll need to pass them as an array rather than a string .

Since you have jQuery, I'd recommend using $(document).ready(function(){}); like so:

EDIT: forgot to mention that when you call your $.each() function the first time, the callback function needs the parameters of index and value , so you can iterate through them as key => value pairs if that's what you're choosing to do. Otherwise, you could just use the value parameter in your option-build like:

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']);
});

Also, you're using a non-unique ID #product for each of your dropdowns. IDs should be unique, so I've written the code using .product as a class instead. The new 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>