How to add option value in dropdown using javascript

This post will discuss how to dynamically create a dropdown list in JavaScript and jQuery.

Table of Contents Show

1. Using JavaScript solution
2. Using jQuery solution
How can you add options to a selection list with JavaScript?
How do you add a value to a drop
How do I add a button to a drop
What is option value in JavaScript?

To add a dropdown list dynamically, you would need to create the HTML <select> element, its label and optionally a <br> tag.

In pure JavaScript, you can use the document.createElement() method to programmatically create a dropdown list. Then you can call the Node’s appendChild() method or jQuery’s .append() method to append the dropdown list at the end of a container.

1. Using JavaScript solution

JS

document.getElementById('generate').onclick= function(){

varvalues= ["dog","cat","parrot","rabbit"];

varselect= document.createElement("select");

select.name="pets";

select.id="pets"

for (constval of values)

{

varoption=document.createElement("option");

option.value=val;

option.text= val.charAt(0).toUpperCase()+ val.slice(1);

select.appendChild(option);

}

varlabel=document.createElement("label");

label.innerHTML="Choose your pets: "

label.htmlFor="pets";

document.getElementById("container").appendChild(label).appendChild(select);

}

HTML

<html>

<body>

<br>

<div>

<button id="generate">Generate</button>

</div>

</body>

</html>

Edit in JSFiddle

2. Using jQuery solution

JS

$(document).ready(function(){

$('#generate').click(function() {

varvalues= ["dog","cat","parrot","rabbit"];

$('#container')

.append(

$(document.createElement('label')).prop({

for:'pets'

}).html('Choose your pets: ')

)

.append(

$(document.createElement('select')).prop({

id: 'pets',

name:'pets'

})

)

for(const val of values){

$('#pets').append($(document.createElement('option')).prop({

value:val,

text: val.charAt(0).toUpperCase()+ val.slice(1)

}))

}

})

});

HTML

<html>

<body>

<br>

<div>

<button id="generate">Generate</button>

</div>

</body>

</html>

Edit in JSFiddle

Alternatively, you can do like:

JS

$(document).ready(function(){

$('#generate').click(function() {

varvalues= ["dog","cat","parrot","rabbit"];

varselect=$('<select>').prop('id','pets')

.prop('name','pets');

$(values).each(function(){

select.append($("<option>")

.prop('value',this)

.text(this.charAt(0).toUpperCase()+ this.slice(1)));

});

varlabel=$("<label>").prop('for','pets')

.text("Choose your pets: ");

varbr =$("<br>");

$('#container').append(label).append(select).append(br);

})

});

HTML

<html>

<body>

<br>

<div>

<button id="generate">Generate</button>

</div>

</body>

</html>

Edit in JSFiddle

That’s all about dynamically creating a drop-down list in JavaScript and jQuery.

Rate this post

Average rating 4.14/5. Vote count: 70

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding :)

How can you add options to a selection list with JavaScript?

First, use the Option constructor to create a new option with the specified option text and value:.

let newOption = new Option('Option Text','Option Value'); ... .

const select = document.querySelector('select'); select.add(newOption,undefined);.

How do you add a value to a drop

The add() method is used to add an option to a drop-down list. Tip: To remove an option from a drop-down list, use the remove() method.

How do I add a button to a drop

Example Explained. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

What is option value in JavaScript?

The value property sets or returns the value of the option (the value to be sent to the server when the form is submitted). Tip: If the value property is not specified for an option element, then the text content will be sent to the server when the container form is submitted.