Add and Remove Options in Select using jQuery

jquery javascript legacy

Legacy Content Notice: This post demonstrates jQuery techniques from 2011. For modern projects, consider using vanilla JavaScript alternatives shown below. See our Modern JavaScript Development Guide for contemporary approaches.

Removing an item from a select box using jQuery

JQuery is a easy way of using JavaScript reducing the time it takes to code and reduces the amount of lines you need to code. This is a good example of this is by removing an option from a select box using jQuery. If you have a select box:


<select id="selectBox" name="selectBox">
    <option value="option1"> option1 </option>
    <option value="option2"> option2 </option>
    <option value="option3"> option3 </option>
    <option value="option4"> option4 </option>
</select>

Remove From Select Drop Down

To remove a option from here you would:


$("#selectBox option[value='option1']").remove();

Add Option To Select Drop Down

To add an option to a select box, this will add an option to the end of the option list.


$("#selectBox").append('<option value="option6">option6</option>');

Remove All Options Except The First

When you have a select box that needs to be populated using Ajax you will want to keep the first option as this is used as the empty value. This will not change with any of the data that is in the select box. When using ajax you want to remove all the other options so you can re-populate the select box with the new data. Use the following code to remove all the options in the select box except for the first option.


$('select').children('option:not(:first)').remove();

Add Options From Array

If you have an array of key value pairs which you will use to populate a select box. Use the following snippet to populate a select box with a key value pair.


$.each(selectValues, function(key, value) {
     $('#mySelect')
         .append($("<option></option>")
         .attr("value",key)
         .text(value));
});

Modern JavaScript Alternative (2024)

Here's how to accomplish the same tasks using modern vanilla JavaScript:

Modern: Remove Option by Value

// Remove option with specific value
const selectBox = document.getElementById("selectBox");
const optionToRemove = selectBox.querySelector('option[value="option1"]');
optionToRemove?.remove();

Modern: Add Option to Select

// Add new option to select
const selectBox = document.getElementById("selectBox");
const newOption = document.createElement("option");
newOption.value = "option6";
newOption.textContent = "option6";
selectBox.appendChild(newOption);

Modern: Remove All Options Except First

// Remove all options except the first
const selectBox = document.querySelector("select");
const options = selectBox.querySelectorAll("option:not(:first-child)");
options.forEach((option) => option.remove());

Modern: Add Options From Array

// Populate select from array of objects
const selectValues = [
    { key: "value1", value: "Display Text 1" },
    { key: "value2", value: "Display Text 2" },
];

const selectBox = document.getElementById("mySelect");
selectValues.forEach(({ key, value }) => {
    const option = document.createElement("option");
    option.value = key;
    option.textContent = value;
    selectBox.appendChild(option);
});

Using Modern Web APIs

// More efficient bulk operations
const selectBox = document.getElementById("selectBox");

// Clear all options
selectBox.innerHTML = "";

// Add multiple options at once
const optionsHTML = selectValues
    .map(({ key, value }) => `<option value="${key}">${value}</option>`)
    .join("");
selectBox.innerHTML = optionsHTML;

This post has been preserved for historical reference. Modern web development favors vanilla JavaScript and framework-specific approaches over jQuery.

Follow Me Subscribe To RSS Feed Subscribe To Email