- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to populate select list with jQuery?
To populate select list with jQuery, use for loop along with append() and append the options to the already created select.
Let’s say we have the following select with options −
<select id="customerNameList" name="customer"> <option value="John">John</option> <option value="David">David</option> </select>
Example
Following is the code to append more number of options using append() −
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <select id="customerNameList" name="customer"> <option value="John">John</option> <option value="David">David</option> </select> </body> <script> $(document).ready(function () { var data = [ { "name": "Bob", "customerName": "Bob" }, { "name": "Mike", "customerName": "Mike" } ]; for (var index = 0; index <= data.length; index++) { $('#customerNameList').append('<option value="' + data[index].name + '">' + data[index].customerName + '</option>'); } }); </script> </html>
To run the above program, save the file name anyName.html (index.html). Right click on the file and select the option “Open with Live Server” in VS Code editor.
Output
The output is as follows −
- Related Articles
- How to select multiple elements with jQuery?
- jQuery select() with Examples
- How do I select text nodes with jQuery?
- How to get selected text from a drop-down list (select box) using jQuery?
- How to select element with specific class and title attribute using jQuery?
- How can I select an element by name with jQuery?
- Output only the first word from select list value - jQuery?
- How to select multiple options in a dropdown list with JavaScript?
- How can I select an element with multiple classes in jQuery?
- How to use select list in selenium?
- How to populate XDocument from String in C#?
- How to create and populate two-dimension Java array?
- How to select an item from a dropdown list using Selenium WebDriver with java?
- How to populate a 2d array with random alphabetic values from a range in Java?
- Select all elements with “data-” attribute with jQuery and display on Console?

Advertisements