CODEWITHSUNDEEP
javascriptjqueryhtmlforms
NucleusDevelopment
NucleusDevelopment

Reputation: 119

How do I dynamically add new items to dropdown list within this form using jquery?

$(document).ready(function() {
    var element;
    $(".form-element").on("mousedown", function(event){
    element = $('<form><select name="dropdown"><option>Select...</option><option value="new-dropdown">add new...</option><option value="machine3">Machine 3</option><option value="machine4">Machine 4</option></select></form>');
    $("#body-div").append(element);
    });
});

The items in the list currently are just there for testing. But I need to be able to click on an add new option and add a new list item.

Upvotes: 3

Views: 20601

Answers (2)

Shrikantha Budya
Shrikantha Budya

Reputation: 644

First add a new id for both the select tag and the option tag with the value "new option";

element = $('<form>
<select name="dropdown" 
id="sel"><option>Select...</option>
<option value=
"new-dropdown"id="anew">add new...
</option></select></form>');

now im assuming that you already have the values for both the value and the text for that option let both of them be x and y respectively; now add an onClick handler to #anew to append #sel with a new option with value x and text y:

z=$('<option value="'+x+'">'+y+'</option>');

$("#anew").onClick(function(){
$("#sel").append(z);
});

hope it solves your problem

Upvotes: 0

adriancarriger
adriancarriger

Reputation: 3000

Working Fiddle

It looks like you were trying to dynamically add the entire form, but you only need to add additional option elements to your select section of your form.

To do this add this HTML

HTML

<input id="text-to-add" type="text" value="Machine 3">
<button id="new-item">Add to dropdown</button>
 <form>
     <select name="dropdown">
         <option>Select...</option>
         <option>Machine 1</option>
         <option>Machine 2</option>
     </select>
</form>

Then to dynamically add a select element use the append jQuery function.

jQuery

$(document).ready(function () {
    $('#new-item').click(function() {
        console.log($('#text-to-add').val());
        $('select').append( '<option>' + $('#text-to-add').val() + '</option>' );
    });
});

Upvotes: 5

Related Questions