首页 文章

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

提问于
浏览 次
0

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

javascript jquery html

2 回答

  • 1

    要使用“测试产品”值获得所有下拉列表，请使用以下代码，您不需要循环 .

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

    我认为你're running into is with the way you'重新初始化数据的问题 body onload="populateSelect('TestProduct'); 首先，为了通过ID成功 $.each() ，你需要将它们作为 array 而不是 string 传递 .

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

    EDIT: 忘了提及当你第一次调用 $.each() 函数时，回调函数需要 index 和 value 的参数，所以如果's what you'选择这样做，你可以将它们作为 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>
    回复于

相关问题