所有列表项的Javascript / JQuery相同的下拉菜单

Question

好的我正在尝试简单地创建一个动态列表，使用JQuery或Javascript生成相同的下拉菜单。

<ul id="main-list">
    <li value="a" class="dd-list-item"> A </li>
    <li value="b" class="dd-list-item"> B </li>
    <li value="c" class="dd-list-item"> C </li>
</ul>

<ul class="list-menu">
    <li>Rename </li>
    <li>Delete</li>
</ul>

<form>
      <input type="text" id="text-input" placeholder="New item"/>
      <input type="button" id="btn" value="Add New"/>
</form>

上面是HTML代码的一部分。现在，下面是实现将新项添加到列表的JQuery代码。

$(function(){
let list= $('#main-list');    
let button = $('#btn');

button.on('click', function(){
     let value = $('#text-input').val();
     list.append("<li  class='dd-list-item'>" + value + "</li>");
});

$('.list-menu').clone().appendTo('.dd-list-item');

});

这是我到目前为止最接近动态添加新列表项的方法，但我没有成功创建一个下拉列表，其中列出的项目具有相同的选项。任何想法如何有效地去做？

Answer 1

您的报价存在问题。 HTML代码段中的引号不会被替换。

而不是

list.append("<li  class="dd-list-item">" + value + "</li>");

使用

list.append('<li  class="dd-list-item">' + value + "</li>");

（使用小提琴https://jsfiddle.net/o2gxgz9r/9401/）

Answer 2

像这样： https://www.w3schools.com/code/tryit.asp?filename=FH6GZAFJOEHS

脚本：

[source]