所有列表項的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

劇本：

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