JQuery Remove combobox items(options) from DropDownList

Today, We want to share with you JQuery Remove combobox items(options) from DropDownList.In this post we will show you how to add / remove dropdown dynamically with jquery, hear for Delete / Remove / Clear all items (options) from DropDownList using JavaScript and jQuery we will give you demo and example for implement.In this post, we will learn about Delete / Remove / Clear all items (options) from DropDownList using JavaScript and jQuery with an example.

JQuery Remove combobox items(options) from DropDownList

There are the Following The simple About jquery remove all options from select except selected Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery clear dropdown except first option, so the How to remove combobox items using JQuery? is used for this example is following below.

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

Read Also:  Laravel Resize Image Before Upload Example

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

five jquery functions

function removeBasedOnValue(id, value) {
$("#" + id + " > option[value='" + value + "']").remove();
}

function removeBasedOnIndex(id, value) {
$("#" + id + " > option:eq(" + value + ")").remove();
}

function removeBasedOnContainValue(id, value) {
$("#" + id + " > option:contains('" + value + "')").remove();
}

function removeSelectedIndex(id) {
$("#" + id + " > option:selected").remove();
}

function removeAllOptions(id) {
$("#" + id + " > option").remove();
}

HTML Part

index.html

I will create HTML file.Just see bellow HTML with jQuery and css example html file and run in your local too.

Read Also:  remove all options from select jquery

HTML Source code

<select id="ddFineFigures">
<option value="1">FineFigure 1</option>
<option value="2">FineFigure 2</option>
<option value="3">FineFigure 3</option>
<option value="4">FineFigure 4</option>
<option value="5">FineFigure 5</option>
<option value="6">FineFigure 6</option>
<option value="7">FineFigure 7</option>
<option value="8">FineFigure 8</option>
</select>

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

use the functions based on above Example.

removeAllOptions('ddFineFigures');
removeBasedOnContainValue('ddFineFigures', '4');

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery add option to select list.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.