3

我有一个 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();
        };
    }
4

1 回答 1

1

尝试通过从 .html() 方法设置和获取 html 将主 div 的所有元素复制到所有其他 div。在演示中， myDropDownListDiv中的所有元素都被复制到anotherDiv。

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>

jQuery :

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

演示

于 2013-10-30T00:33:34.060 回答