How do you remove all the options of a select box and then add one option and select it with jQuery?

Chain of command

Compact, readable, and maintainable. That's what chaining affords. Just look at this:

$('#selectBoxId').empty().append($('<option>', {
    value: 'gangsterValue', // 🧑‍🎤 Shiny value, we rock!
    text: 'Rocking Text'
})).val('gangsterValue');


Chaining brings out the beauty of jQuery at its peak, reducing DOM trips, and making your code as snappy as a crocodile.

Juggling multiple jQuery objects

Operations on more than one element are like spinning multiple plate on sticks. Don't fret, .end() will save your day:

$('#selectBoxId').find('option').remove().end().append('<option value="gangsterValue">Rocking Text</option>').val('gangsterValue'); // 🎩 Magic end!


Voila! It returns to the original element at the end of the execution, ensuring your jQuery object doesn't get lost in the abyss.

Entangling Internet Explorer quirks

For folks still supporting old versions of Internet Explorer, you might want to sprinkle some 'selected' attribute in the mix for good measure:

$('#selectBoxId').empty().append('<option value="gangsterValue" selected="selected">Rocking Text</option>'); // 🍒 Cherry on top


First option survivor 🏝️

Need the first option to survive the empty() apocalypse? Use the :not selector:

$('#selectBoxId').find('option:not(:first)').remove(); // 🙈 Hide n Seek


This ensures the first option remains intact while sending all the others to the valley of the forgotten.

Beyond jQuery: Vanilla to the rescue

When jQuery's too sugar-coated and you want some pure, raw vanilla JavaScript:

let selectBox = document.getElementById('selectBoxId');
selectBox.options.length = 0; // 💫Poof! All gone.
selectBox.options.add(new Option('Raw Text', 'rawValue', true, true)); // 🐾Another one in the pack!


Use new Option() to peel jQuery and get a clean, direct approach to crisper options.

Balance with standard DOM techniques

Some offer you the red pill, some offer the blue. Here, swallow both. Mix jQuery with standard DOM to balance out browser quirks:

$('#selectBoxId').empty().append(document.createElement('option').text = 'Balanced Text').val('wavyValue'); // ⚖️ It's all about balance.


DOM and jQuery, different as night & day, but together they make a perfect dawn.