Add and Remove Options in Select using jQuery

add-option-to-dropdown.js

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

add-options-from-array.js

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

example-select-dropdown.html

<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-all-options-except-first-option.js

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

remove-option-from-dropdown.js

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

Perfeito! Parabéns!

Thanks

thanks really helpful

very helpful, thanks muchly

but if we do like this, after page reload the dropdown list value will be shown again

thx

thanks bro.

This works well.
$('#myselect').children('option').remove();
and after in your ajax request or using getJSON, bind the select like this:
$('#myselect').append(new Option(value.content, value.id, false, false));

nice

Good, but how I can update select?

I added new option successfully but when I lost focus and click select box again, newly added option gone. any idea why?

Another way to write the example from add-options-from-array.js

$.each(selectValues, (key, value) => {
    $("<option/>", {
        "value": key,
        "text": value
    }).appendTo($("#mySelect");
});

Remove all items:

$("#city_id").empty();

thanks!.

great, Thanks For Sharing.

Thank you, this worked perfectly for what I needed

Thank you!

I want to remove one option and append another option in the same index.
Consider that:
<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>

After remove and append I want the options like:
<select id="selectBox" name="selectBox" >
<option value="myoption"> myoption <option>
<option value="option2"> option2 <option>
<option value="option3"> option3 <option>
<option value="option4"> option4 <option>
<select>

Is there any way to work with index?