Last update on August 19 2022 21:50:45 [UTC/GMT +8 hours]

jQuery Practical exercise Part - I : Exercise-31

Add options to a drop-down list using jQuery.

Sample Solution:

HTML Code :

Add options to a drop-down list using jQuery.

List of Colors :

JavaScript Code:

`var myOptions = {

val1 : 'Blue',  
val2 : 'Orange'  

myColors'];

$.each[myOptions, function[val, text] {

mySelect.append[  
    $[''].val[val].html[text]  
];  

See the Pen jquery-practical-exercise-31 by w3resource [@w3resource] on CodePen.

Contribute your code and comments through Disqus.

Previous: Change button text using jQuery. Next: Set background-image using jQuery CSS property.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

• Weekly Trends and Language Statistics
• Weekly Trends and Language Statistics

In this Byte, we'll explore how to add options to a dropdown list using jQuery. The element is a frequently used element in HTML forms, allowing users to choose an option from a predefined list. However, there quite a few situations where you need to dynamically add options to your list, and that's where jQuery comes into play.

Select Elements in HTML

The element in HTML creates a dropdown list of options for the user to choose from. Each option within the element is defined by an tag. Here's a simple example:

    Apple
    Banana
    Cherry

In this example, the user can choose between an apple, a banana, or a cherry. The

$[document].ready[function[] {
    $['
# fruits'].append[new Option['Grapes', 'grapes']];
}];

0 attribute in the tag is what gets sent when the form is submitted and is usually a more code-friendly format of the option [like an ID, slug, etc].

Why use jQuery to add options?

There are a lot of reasons you might need to add options to your dropdown list dynamically, after the page has loaded. Let's say, for instance, that you're fetching data from a server and want to populate your dropdown list based on the returned data. jQuery can help make this a lot easier. It does so by simplifying things like traversing and manipulating the HTML document, event handling, and Ajax.

Adding an Option to with jQuery

Adding an option to a element with jQuery is pretty straightforward. First, you select the element, and then you append an to it. Here's the code to do it:

$[document].ready[function[] {
    $['
# fruits'].append[new Option['Grapes', 'grapes']];
}];

In this code, we're adding a new option with the text "Grapes" and a value of "grapes" to the "fruits" dropdown list. When the document is ready [i.e., when the HTML document has been loaded], the new option is appended to the element with the ID "fruits".

Note: The

$[document].ready[function[] {
    $['
# fruits'].append[new Option['Grapes', 'grapes']];
}];

8 function ensures that the script runs after the document is fully loaded. This is necessary because the script needs to manipulate HTML elements that must exist when the script runs.

Now, if you look at your dropdown list, you'll see that "Grapes" has been added as an option. It's as simple as that! In the next section, we'll look at how to add multiple options at once, remove options, and modify existing options using jQuery. Stay tuned!

Adding Multiple Options to with jQuery

When it comes to adding multiple options to a element, jQuery makes it a breeze. The

var fruits = [{
    text: "Strawberry",
    value: "strawberry"
}, {
    text: "Watermelon",
    value: "watermelon"
}, {
    text: "Peach",
    value: "peach"
}];
$.each[fruits, function[idx, fruit] {
    $['
# fruits']
      .append[$['']
      .text[fruit.text]
      .attr['value', fruit.value]];
}];

1 method comes in handy here. Suppose you have an array of options that you want to add to your element. Here's how you can do it:

var fruits = [{
    text: "Strawberry",
    value: "strawberry"
}, {
    text: "Watermelon",
    value: "watermelon"
}, {
    text: "Peach",
    value: "peach"
}];
$.each[fruits, function[idx, fruit] {
    $['
# fruits']
      .append[$['']
      .text[fruit.text]
      .attr['value', fruit.value]];
}];

In this example,

var fruits = [{
    text: "Strawberry",
    value: "strawberry"
}, {
    text: "Watermelon",
    value: "watermelon"
}, {
    text: "Peach",
    value: "peach"
}];
$.each[fruits, function[idx, fruit] {
    $['
# fruits']
      .append[$['']
      .text[fruit.text]
      .attr['value', fruit.value]];
}];

3 is the ID of your element. The

var fruits = [{
    text: "Strawberry",
    value: "strawberry"
}, {
    text: "Watermelon",
    value: "watermelon"
}, {
    text: "Peach",
    value: "peach"
}];
$.each[fruits, function[idx, fruit] {
    $['
# fruits']
      .append[$['']
      .text[fruit.text]
      .attr['value', fruit.value]];
}];

5 function iterates over the

var fruits = [{
    text: "Strawberry",
    value: "strawberry"
}, {
    text: "Watermelon",
    value: "watermelon"
}, {
    text: "Peach",
    value: "peach"
}];
$.each[fruits, function[idx, fruit] {
    $['
# fruits']
      .append[$['']
      .text[fruit.text]
      .attr['value', fruit.value]];
}];

6 array and for each fruit, it creates a new element with the text and value set accordingly.

Removing Options from with jQuery

There might be times when you want to remove options from a element. Again, jQuery provides several ways to do this. One of the simplest methods is to use the

$['
# fruits option[value="peach"]'].remove[];

0 function.

$['
# fruits option[value="peach"]'].remove[];

This will remove the option with value "peach" from your element. Pretty straightforward, right?

Note: You can also use the

$['
# fruits option[value="peach"]'].remove[];

2 selector to remove the currently selected option. Like this:

$['
# fruits option[value="peach"]'].remove[];

3

Modifying Options in with jQuery

Modifying the text or value of an option in a element is just as easy. You can use the

$['
# fruits option[value="peach"]'].remove[];

6 and

$['
# fruits option[value="peach"]'].remove[];

7 methods to modify the text and value of an option respectively. Here's how:

$['
# fruits option[value="apple"]'].text['Forbidden Fruit'].val['forbidden-fruit'];

This will change the text of the option with value "apple" to "Forbidden Fruit" and its value to "forbidden-fruit".

Conclusion

Working with elements in jQuery is quite simple once you learn the methods. From adding multiple options, removing options to modifying existing ones - jQuery provides all the methods to make these tasks easy to do.

How to set the first option on a select box using jQuery?

How to select first element in the drop-down list using jQuery ?.

Select the first element of element using the jQuery selector..

Use the prop[] method to get access to properties of that particular element..

Change the selectedIndex property to 0 to get access to the first element [Index starts with 0]..

How to add multiple options to select in jQuery dynamically?

Adding Multiple Options to with jQuery var fruits = [{ text: "Strawberry", value: "strawberry" }, { text: "Watermelon", value: "watermelon" }, { text: "Peach", value: "peach" }]; $. each[fruits, function[idx, fruit] { $['

fruits'] . append[$[''] .

How to set option value in jQuery dynamically?

Dynamic Value Setting in jQuery You can also set the select option value dynamically based on conditions in your JavaScript code. var country = $['

country']; var newValue = 'NZ'; if[country_name == 'New Zealand"] country. val[newValue];

How to dynamically add DropDownList using jQuery?

Creating dynamic DropDownList in HTML using jQuery.

function AddDropDownList[] { ... .

{ CustomerId: 1, Name: "John Hammond", Country: "United States" }, ... .

{ CustomerId: 4, Name: "Robert Schidner", Country: "Russia" } ... .

var ddlCustomers = $[""]; ... .

var option = $[""]; ... .

option. ... .

option..