Question

我有一个HTML表格，通常为10-30行，并带有“项目名称”列。下拉本身有大约75种产品可供选择。为了缩小页面大小，我想为每一行重用一个下拉列表。

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

阅读道明
将下拉列表加载到TD
选择活动值作为上一个文本值
在行退出时，撤消流程

下拉列表中的项目是在页面加载时从数据库填充的。我认为最好的方法是隐藏列表，只根据需要将其显示在该位置。但我不确定如何完成第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();
        };
    }

Answer 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());
});

Demo

为单个表行重用单个HTML选择/下拉列表？

1 个答案: