繁体   English   中英

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

unable to show dynamic value in the dropdown list available in the table column

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

2 个回复

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

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

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

由于您具有jQuery,因此建议您使用$(document).ready(function(){}); 像这样:

编辑:忘记提及,当您第一次调用$.each()函数时,回调函数需要indexvalue的参数,因此如果您要选择的话,您可以将它们作为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>
1 Google 表格从列中的某些值创建下拉列表

我正在使用谷歌表。 我有两张名为 App Catgeory 和 Directory Category 的工作表。 应用类别有两列:- 1. 类别名称 2. 是可选的 在目录类别中,我有类别选择下拉列表,它是从应用类别表的类别名称列创建的。类别名称列中的所有值都可以在下拉列表中使用。 下拉列表是由这 ...

3 如何从下拉列表中的值显示表格? 点火枪

我有一个这样的下拉列表: 我想要的是:如果我从下拉列表中选择值“ panel”,然后单击按钮(名称=“ tampilkan”),它将显示表格。 如果我选择值“ lampu”,它将显示不同的表。 我尝试使用此代码: 但这是行不通的。 我真的需要您的帮助,谢谢。 ...

4 无法选择下拉列表值,选择每个下拉列表后如何显示动态字段?

我有一个名为添加合作伙伴的按钮。 当您单击此按钮时,它将显示类似这样的动态行。 显示行之后,我首先单击选择Dropbox,然后选择Bank two 。 现在注意这里,如果我单击添加银行,那么“第一选择”下拉列表将自动填充第一行选择的值。 我的意思是我选择了第二Bank ...

5 Google 表格中的动态下拉列表

我想知道如何在 Google 表格中制作动态下拉列表,例如,我在“大陆”列中有一个大陆列表(应用了数据验证),并且想验证下一列,其中仅包含位于上一个选定大陆上的国家/地区。 示例表 在没有脚本的情况下解决这个问题会很有帮助。 如果需要脚本请详细说明。 ...

8 基于其他列中的值的Jqgrid动态下拉列表

我有3列的JQGrid。 第三列,基于第二列中的某些值,我希望它作为下拉列表。 这可能吗? 同样在JQGrid演示中,添加一个下拉列表,我们需要将edittype设置为“ select”并在JSON中传递值。 我的下一个问题是如何将模型对象中期望的格式的值传递给此列。 ...

9 在OTRS的下拉列表中显示动态值

我有两个下拉的动态字段。 现在,我想展示基于另一个下拉列表的下拉列表的值。 例如,我有两个下拉菜单,分别是State和City。现在,如果选择伊利诺伊州,则在另一个下拉菜单中应显示该州的城市。 那么如何在OTRS中定义这种关系 ...

10 无法使用PHP动态设置下拉列表中的值

我需要一个帮助。我需要设置使用PHP从数据库中获取的下拉值。我在下面解释我的代码。 在这里我可以将$getcustomerobj-&gt;companypro的值$getcustomerobj-&gt;companypro为1,但仍无法在下拉列表中进行设置。请帮助我。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM