Javascript 制作一个可编辑的下拉列表并从外部JS填充它

我想制作一个可编辑的下拉列表，双击数据时，下拉列表应该会出现，并填充来自和外部JS的选项，这应该可以运行多次。 以下是此应用程序的HTML

<div class="tabbable">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <table id='table-draggable1'>
                <tbody class="connectedSortable">
                    <tr>
                        <th>col1</th>
                        <th>col2</th>
                        <th>col3</th>
                        <th>col4</th>
                    </tr>
                    <tr>
                        <td>156</td>
                        <td>668</td>
                        <td>100.95</td>
                        <td class="master">100.95</td> //editable dropdown
                    </tr>
                    <tr>
                        <td class="desc">256</td>
                        <td>668</td>
                        <td>100.95</td>
                        <td class="master">100.95</td> // ondblclick should be editable
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

可乐
可乐
可乐
可乐
156
668
100.95
100.95//可编辑下拉列表
256
668
100.95
100.95//ondblclick应该是可编辑的

我尝试使下拉列表可编辑的jquery

    $document.ready(function ()
        {
dropdown();
            $(function ()
            {
                $(".master").dblclick(function (e)
                {
                    e.stopPropagation();
                    var currentEle = $(e.target);
                    var value = $(e.target).html();
                    console.log($(e.target));
                    if ($.trim(value) === "")
                    {
                        $(currentEle).data('mode', 'add');
                    }
                    else
                    {
                        $(currentEle).data('mode', 'edit');
                    }
                    updateVal(currentEle, value);
                });
            });

            function updateVal(currentEle, value)
            {
                $(currentEle).html("<select class='master'></select>");
                var mode = $(currentEle).data('mode');
                alert(mode);
                $(".master").focus();
                $(".master").keyup(function (event)
                {
                    if (event.keyCode == 13)
                    {
                        $(this).parent().html($(this).val().trim());
                        $(".master").remove();
                    }
                });
            }
            $(document).click(function (e)
            {
                if ($(".master") !== undefined)
                {
                    if ($(".master").val() !== undefined)
                    {
                        $(".master").parent().html($(".master").val().trim());
                        $(".master").remove();
                    }
                }
            });
        }

        function dropdown()
        {
           var resp = "<option>" + 1 + "</option>"; //this should be populated in dropdown
           $(".master").html(resp);
        }
    }

    });

$document.ready（函数（）
{
下拉菜单（）；
$（函数（）
{
$（“.master”）.dblclick（函数（e）
{
e、 停止传播（）；
var currentEle=$（e.target）；
var value=$（e.target.html（）；
log（$（e.target））；
如果（$.trim（值）=“”）
{
$（currentEle）.data（'mode'，'add'）；
}
其他的
{
$（currentEle）.data（'mode'，'edit'）；
}
updateVal（当前元素，值）；
});
});
函数updateVal（currentEle，value）
{
$（currentEle.html（“”）；
var mode=$（currentEle）.data（'mode'）；
警报（模式）；
$（“.master”）.focus（）；
$（“.master”）.keyup（函数（事件）
{
如果（event.keyCode==13）
{
$（this.parent（）.html（$（this.val（）.trim（））；
$（“.master”）.remove（）；
}
});
}
$（文档）。单击（函数（e）
{
如果（$（“.master”）！==未定义）
{
if（$（“.master”）.val（）！==未定义）
{
$（.master”）.parent（）.html（$（.master”）.val（）.trim（））；
$（“.master”）.remove（）；
}
}
});
}
函数下拉列表（）
{
var resp=“”+1+”；//应该在下拉列表中填充
$（“.master”）.html（resp）；
}
}
});

---

您可以通过使用HTML5中的datalist标记来实现这一点

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="a">Apple</option>
    <option value="o">Orange</option>
    <option value="b">Banana</option>
</datalist>

苹果
橙色
香蕉

如果在浏览器中双击输入文本，将显示带有已定义选项的列表

使用javascript添加：允许通过ajax从服务器获取数据

否则，您可以使用jquery：

---

您可以参考相同的。

尝试$（文档）而不是$documentNo sir。它不起作用。我什么都试过了。这不是语法错误。应该从后端填充下拉列表。因此，双击下拉菜单应该出现，所有的选项都应该被填充。我需要从后端获取选项，所以他们没有为此定义的选项列表。因此，单击或双击它应该使文本框可编辑，并且应该填充选项列表。我可以理解，因为您可以使用ajax获取数据并在javascriptI中创建此数据列表。我填充了数据，但当我尝试编辑列表时，列表未填充。如果可能，请尝试进行修改。我已经尝试了你试图给出的解决方案。但它不起作用。我使用javascript填充ui，使用jquery我使其他文本字段可编辑，但我无法获得下拉列表。哪个不起作用？您不能从数据库中获取数据吗？