对多个表行重用单个 HTML 选择/下拉列表

Reusing single HTML select / drop down list for multiple table rows?

本文关键字：HTML 单个 选择 下拉列表      更新时间：2023-09-26

我有一个HTML表格，通常有10-30行长，其中一列用于"项目名称"。下拉菜单本身有大约 75 种产品可供选择。为了使页面大小更小，我想为每一行重复使用一个下拉列表。

也就是说，当我点击一行时，jQuery 应该

  1. 阅读TD中的项目名称
  2. 将下拉列表加载到TD中
  3. 选择活动值作为上一个文本值
  4. 在行退出时，反转该过程

下拉列表中的项是在页面加载时从数据库填充的。我认为最好的方法是隐藏列表，仅根据需要使其出现在该位置。但我不确定如何完成步骤 2 和 3

编辑

不确定您要查找的代码，因为这就是我的问题。但是，如果我有如下所示的内容，我需要将该隐藏的选择列表放入活动行中，并使其选择表格单元格中已有的值。

<table>
    <tr>
        <td>Item Name</td>
        <td>Item Value</td>
    </tr>
    <tr>
        <td>Product A</td>
        <td>166.22</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>166.22</td>
    </tr>
</table>
<select id="itemname" style="display:none;">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>

编辑 2 - 可能的解决方案

根据下面的一个回复，我摸了一下，能够创建这个有效的脚本。不确定我是否可以提高效率，但它确实符合我的要求。该函数将"e"作为TD

    function addItem(e) {
        if ($(e).find('select').length) {
            var input = $(e).find('select').eq(0);
            $(e).text($(input).val());
            $(input).appendTo($('.promotion-header'));
        }
        else {
            var text = $(e).text();
            $(e).text('');
            $('#itemname').appendTo(e).val(text).show();
        };
    }

尝试通过设置并从 .html（） 方法获取 html 将主div 的所有元素复制到所有其他div。在演示中，myDropDownListDiv 中的所有元素都被复制到另一个 Div。

.HTML： 

<div id="myDropDownListDiv"><select id="itemname">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>
</div>
    <div id="anotherDiv">
</div>

j查询 ：

$(document).ready(function(){
    //copies all contents of myDropDownListDiv into anotherDiv
    $("#anotherDiv").html($("#myDropDownListDiv").html());
});

演示

相关文章：