Clear All Select Elements in an HTML Dropdown

One of the things I like jquery for is that there is a multitude of ways to do something. I like options. Clearing a drop down in jquery is no
exception. Here are some ways to do it. Keep in mind that these are only on the client side.

All of these can be seen here: http://jsfiddle.net/zy22N/

Assume you have the following html:

<select id="test">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
</select>

<a href="#" id="option1" >Click me</a>
<a href="#" id="option2" >Click me</a>
<a href="#" id="option3" >Click me</a>

Option 1:

$('#option1').click(function() {
    $('#test option').remove();
});

Option2:

$('#option2').click(function() {
    $("#test").html("<option selected=\"selected\"></option>");
 });

Option 3:

$('#option3').click(function() {
document.getElementById("test").options.length = 0;
});

As a bonus you can remove one element by using:

$("#test option[value='2']").remove();

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − = 4

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>