Home »
jQuery »
jQuery Examples
How do you remove all the options of a select box and then add one option and select it with jQuery?
Learn, how can we remove all the given options from a select tag and then add one new option and select it using jQuery?
Submitted by Pratishtha Saxena, on August 24, 2022
Select Tag (<select>) is a very essential element used for creating drop-downs for a webpage. The options for the drop-down are given through the option tag (<option>). The select tag takes in various parameters as attributes like name, required, id, etc.
Now, let's discuss how can we remove these options from a select element using jQuery?
There are many ways to clear the options of a select element and replace it with some new options, but over here we'll be going to discuss some ways amongst them.
1) Using find(), remove(), end() and append() methods
In this way, some of the jQuery methods will be taken into consideration like find(), remove(), end() and append(). These are very simple terms to understand and use. Starting with find(), it will search and find the element matched with the content specified within. Then remove() will delete the content and the elements, and end() will return its previous state matched elements (here select tag). Also, append() will simply append the content specified to the target location.
Having a combination of all these methods will help us to find the options of select tag, remove them all and then append the one new option. All these operations can be done separately and also in a single statement. We'll go for a single-line format.
Syntax:
$('selector').find('option').remove().end().append('<option>text</option>');
Example 1: Remove all the options of a select box and then add one option and select it with jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Remove and Replace Options of Select Element</h2>
<label>Drop-Down: </label>
<select id="mySelect">
<option>--Select--</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
<button type="button" id="button1" style="margin-left: 60px;">Clear Options</button>
</body>
<script type="text/javascript">
// METHOD 1
$(document).ready(function(){
$('#button1').on('click',function(){
$('#mySelect').find('option').remove().end().append('<option>HOME</option>');
});
});
</script>
</html>
Output:
After clicking on "Clear Options" button.
2) Using empty() and append() methods
This way of removing the options is also similar to the above-discussed method. The approach will be the same only some new methods will be used. Here instead of finding the options and then removing them, we'll just empty the select tag in one go. This will be achieved by using empty(). After emptying the select element, we can now append a new option by using the append() method as above.
Syntax:
$('selector').empty().append('<option>content</option>');
Example 2: Remove all the options of a select box and then add one option and select it with jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Remove and Replace Options of Select Element</h2>
<label>Drop-Down: </label>
<select id="mySelect">
<option>--Select--</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
<button type="button" id="button1" style="margin-left: 60px;">Clear Options</button>
</body>
<script type="text/javascript">
// METHOD 2
$(document).ready(function(){
$('#button1').on('click',function(){
$('#mySelect').empty().append('<option>HOME</option>');
});
});
</script>
</html>
Output:
After clicking on "Clear Options" button.
3) Using options.length
This way of removing the options is a bit different. Here we are going to empty the select element by making the length of the options of the select tag equal to zero. This will empty the options. The new option will be added the way we have been doing it up till now, by using the append() method for it.
Syntax:
$('selector')[0].options.length=0;
Example 3: Remove all the options of a select box and then add one option and select it with jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Remove and Replace Options of Select Element</h2>
<label>Drop-Down: </label>
<select id="mySelect">
<option>--Select--</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
<button type="button" id="button1" style="margin-left: 60px;">Clear Options</button>
</body>
<script type="text/javascript">
//MEHTOD 3
$(document).ready(function(){
$('#button1').on('click',function(){
$('#mySelect')[0].options.length=0;
$('#mySelect').append('<option>HOME</option>');
});
});
</script>
</html>
Output:
After clicking on "Clear Options" button.