CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Chuck
Chuck

Reputation: 85

Javascript/JQuery same drop down menu for all list items

Okay I am trying to simply create a dynamic list that generates the same drop down menu using JQuery or 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>

Above is a chunk of the HTML code. Now below is the JQuery code to implement adding the new item to the list.

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

});

This is the closest I have gotten thus far to dynamically add new list item, but I haven't been successful with creating a drop down with the same options for the listed items. Any ideas how to effectively go about it?

Expected Outcome

Upvotes: 0

Views: 126

Answers (2)

Minar_Mnr
Minar_Mnr

Reputation: 1405

like this : https://www.w3schools.com/code/tryit.asp?filename=FH6GZAFJOEHS

Script : 

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

Upvotes: 0

user184994
user184994

Reputation: 18281

You have an issue with your quotes. The quotes in the HTML snippet are not being replaced.

Instead of

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

Use

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

(With fiddle https://jsfiddle.net/o2gxgz9r/9401/)

Upvotes: 1

Related Questions