jQuery - how to remove all select elements

jagku
jagku used Ask the Experts™
on
Hello Experts,

I have a simple select

<select id='myselect'>
<option...>
<option...>
</select>

To remove all the options I am calling:
$('#myselect').empty();

on the onChange. However, this is only removing the values and not the options themselves.
ie If I originally had 10 options appear in the drop down and then call this function, I still have 10 options - but they are all blank.

What am I doing wrong?

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
$('#myselect').html("");

Open in new window

Author

Commented:
Apologies, I don't think I was very descriptive - Friday 13th fever!!!

Just to be very clear on the problem:

html code:
<select id="myselect">
	<option value="1">
	<option value="2">
</select>
<select id="select_unit">
	<option value="dollar">
	<option value="pound">
</select>

Open in new window


jQuery:
$(function() {

	$('#select_unit').change(function() {
		  var unit = $(this).val();
		  // remove all options
		  $('#myselect').empty();
		  if(unit == "dollar")
		  {

				$('#myselect').append('<option value="1">1</option>');
				$('#myselect').append('<option value="2">2</option>');
			}
		  else if(unit == "pound")
		  {
				$('#myselect').append('<option value="3">3</option>');
				$('#myselect').append('<option value="4">4</option>');
			}
		});
});

Open in new window


The select options are simplified for this example.
However, what I want to do is remove all the options in #myselect whenever the user selects a different unit. Once removed, I want to add options to this select. The number of options added will differ to the number that are removed.

Many Thanks!
Multitechnician
Top Expert 2014
Commented:
$(function() {

	$('#select_unit').change(function() {
		  var unit = $(this).val();
		  // remove all options
$('#myselect').html("");
		  if(unit == "dollar")
		  {
				$('#myselect').append('<option value="1">1</option>');
				$('#myselect').append('<option value="2">2</option>');
			}
		  else if(unit == "pound")
		  {
				$('#myselect').append('<option value="3">3</option>');
				$('#myselect').append('<option value="4">4</option>');
			}
		});
});

Open in new window

Author

Commented:
Actually, I haven't checked the answer - but the error was in another part of my code - sorry - but thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial