所有列表项的 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 sn-p 中的引号不会被替换。

代替

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

脚本：

$(document).ready(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>");
});

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