How to add options to a select element using jQuery?
An option can be added to a select element using 3 approaches in jQuery:
Method 1: Append the option tag to the select box
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 with 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(`${optionText}`)
Example:
<!DOCTYPE html> <html> <head> <title> Adding options to a select element using jQuery? </title> </head> <body> <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> <script src= </script> <script type="text/javascript"> function addOption() { optionText = 'Premium'; optionValue = 'premium'; $('#select1').append(`<option value="${optionValue}"> ${optionText} </option>`); } </script> </body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
Method 2: Using the Option() constructor to create a new option
The Option() constructor is used to create a new option element. A new option is created with the text and the value of the option as the parameters. This element is then added to the select box with the append() method.
Syntax:
$('#selectBox').append(new Option(optionText, optionValue))
Example:
<!DOCTYPE html> <head> <title>Adding options to a select element using jQuery?</title> </head> <body> <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> <script type="text/javascript"> function addOption() { optionText = 'Ultimate'; optionValue = 'ultimate'; $('#select1').append(new Option(optionText, optionValue)); } </script> </body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
Method 3: 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:
<!DOCTYPE html> <head> <title>Adding options to a select element using jQuery?</title> </head> <body> <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> <script type="text/javascript"> function addOption() { optionText = 'Extra'; optionValue = 'extra'; $('#select1').append($('<option>').val(optionValue).text(optionText)); } </script> </body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
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.
Please Login to comment...