How to add options to a select element using jQuery?
Last Updated :
12 Jul, 2025
We will dynamically add the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below:
By passing the HTML of the option tag to the append() method
The option to be added is created like a normal HTML string. The select box is selected with the jQuery selector and this option is added using the append() method. The append() method inserts the specified content as the last child of the jQuery collection. Hence the option is added to the select element.
Syntax:
$('#selectBox').append(optionHTML)Example: The below example will explain how you can pass the HTML of the option tag to the append() method to add dynamic option.
html
<!DOCTYPE html>
<html>
<head>
<title>
Adding options to a select element using jQuery?
</title>
</head>
<body>
<center>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
Adding options to a select element using jQuery?
</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>
Click the button below to add
one option to the select box.
</p>
<button onclick="addOption()">
Add option
</button>
</center>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
let optionHTML = `
<option value="${optionValue}">
${optionText}
</option>`;
$('#select1').append(optionHTML);
}
</script>
</body>
</html>
Output:
Using the Option() constructor to create a new option
The Option() constructor can be used to create a new option element. A new option is created with the text and the value passed as the parameters. This element is then added to the select box with the append() method.
Syntax:
$('#selectBox').append(new Option(optionText, optionValue))Example: This example shows the use of the Option() constructor to create the new option tag dynamically.
html
<!DOCTYPE html>
<html>
<head>
<title>
Adding options to a select
element using jQuery?
</title>
</head>
<body>
<center>
<h1 style="color: green">GeeksForGeeks</h1>
<b>
Adding options to a select element using jQuery?
</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>
Click the button below to add one
option to the select box.
</p>
<button onclick="addOption()">Add option</button>
</center>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1')
.append(new Option(optionText, optionValue));
}
</script>
</body>
</html>
Output:
Creating a new option element with the value and the text
A new jQuery DOM element is created with the option tag. The value of the tag is set with the val() method and the text of the option is set with the text() method. The element created is then added to the select box with the append() method.
Syntax:
$('#selectBox').append($('<option>').val(optionValue).text(optionText))Example: The below example illustrate the use of the val() and text() methods of jQuery to add option tag dynamically.
html
<!DOCTYPE html>
<head>
<title>
Adding options to a select element using jQuery?
</title>
</head>
<body>
<center>
<h1 style="color: green">GeeksForGeeks</h1>
<b>
Adding options to a select element
using jQuery?
</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>
Click the button below to add one
option to the select box.
</p>
<button onclick="addOption()">Add option</button>
</center>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append($('<option>')
.val(optionValue).text(optionText));
}
</script>
</body>
</html>
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to remove options from select element using jQuery ? Removing options from a select element using jQuery means programmatically deleting specific or all <option> elements within a <select> dropdown. This can be done using jQuery methods like remove() or empty(), allowing dynamic updates of the dropdown's available choices based on conditio
3 min read
How to get N options from the <select> element using JQuery? The task is to get the random N options from the select element. Below are few of the approaches: Approach 1: First get the all option element's text in the array. Generate a random index of the array and get the option of that index. Swap the last element with the current random index and subtract
3 min read
How to add options to a drop-down list using jQuery? Given an HTML document with a drop-down list menu and our task is to add more options to the drop-down list using jQuery. Approach : To add more option to the existing drop-down list using the append() method : var options = { val1: 'C#', val2: 'PHP' }; var selectOption = $('#programmingLanguage');
2 min read
How to sort option elements alphabetically using jQuery? Sort option elements alphabetically using jQuery, you can extract the options, sort them, and then append them back in the sorted order. This process helps enhance the user experience by organizing dropdown options. Below are the approaches to sort option elements alphabetically using jQuery: Table
3 min read
How to get selected text from a drop-down list using jQuery? In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method
2 min read
How to create a Disabled Option Select using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Disabled Option Select using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=
1 min read