Introduction

Adding options to a dropdown with jQuery is a basic DOM manipulation task, but there are a few different ways to do it cleanly. The safest pattern is to create a real option element, set its value and text, and append it to the target select.

The Basic HTML Structure

Start with a normal dropdown:

<select id="countrySelect">
  <option value="">Choose a country</option>
</select>

Once the page is loaded, jQuery can find this element and add more options dynamically.

Adding One Option

The most readable jQuery version is to create an option node with jQuery("<option>") and then append it:

1<select id="countrySelect">
2  <option value="">Choose a country</option>
3</select>
4
5<script>
6  $("#countrySelect").append(
7    $("<option>", {
8      value: "ca",
9      text: "Canada"
10    })
11  );
12</script>

This avoids manual string concatenation and makes it obvious which part is the value and which part is the display label.

Adding Several Options from Data

In real code, options usually come from an array or an API response.

1<select id="countrySelect"></select>
2
3<script>
4  const countries = [
5    { value: "ca", text: "Canada" },
6    { value: "us", text: "United States" },
7    { value: "mx", text: "Mexico" }
8  ];
9
10  const $select = $("#countrySelect");
11
12  $.each(countries, function (_, item) {
13    $select.append(
14      $("<option>", {
15        value: item.value,
16        text: item.text
17      })
18    );
19  });
20</script>

This pattern scales well because the dropdown structure is separated from the data source.

Replacing Existing Options

If you need to rebuild the list, clear the existing options first and then add the new ones.

1<select id="citySelect">
2  <option value="">Old value</option>
3</select>
4
5<script>
6  const cities = [
7    { value: "tor", text: "Toronto" },
8    { value: "van", text: "Vancouver" }
9  ];
10
11  const $citySelect = $("#citySelect");
12  $citySelect.empty();
13  $citySelect.append($("<option>", { value: "", text: "Choose a city" }));
14
15  $.each(cities, function (_, city) {
16    $citySelect.append(
17      $("<option>", {
18        value: city.value,
19        text: city.text
20      })
21    );
22  });
23</script>

This is common when a second dropdown depends on a first dropdown selection.

Selecting a Value After Appending

After adding options, you can set the selected value with .val():

$("#countrySelect").val("us");

That works only if an option with that value already exists. If the value is missing, the selection stays unchanged.

Working with AJAX Data

Dynamic dropdowns are often populated from an API call. The same append logic applies inside the success handler.

1$.getJSON("/api/countries", function (countries) {
2  const $select = $("#countrySelect");
3  $select.empty();
4  $select.append($("<option>", { value: "", text: "Choose a country" }));
5
6  $.each(countries, function (_, item) {
7    $select.append(
8      $("<option>", {
9        value: item.code,
10        text: item.name
11      })
12    );
13  });
14});

The important rule is simple: update the dropdown after the data arrives, not before.

Why This Approach Is Better Than Raw HTML Strings

You can append a raw string such as:

$("#countrySelect").append('<option value="ca">Canada</option>');

That works, but object-based creation is easier to read and less error-prone when values come from variables. It also reduces the chance of malformed markup caused by string building mistakes.

Common Pitfalls

One common mistake is forgetting to clear the old options before repopulating the dropdown. That leads to duplicate entries every time the code runs.

Another issue is trying to set .val() before the new options exist. The selected value will not magically appear later; append first, then select.

It is also easy to use the wrong selector. If $("#countrySelect") matches nothing, jQuery will not throw a loud error, and the dropdown simply stays unchanged.

Summary

• Use .append() with a real option element to add dropdown entries cleanly.
• Loop over arrays or API results to add multiple options.
• Call .empty() first when rebuilding a dependent dropdown.
• Set the selected value only after the matching option has been appended.
• Prefer structured element creation over fragile HTML string concatenation.