Reputation: 6039
I am trying to clear/empty the selected value in an select element in a jQuery application
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select style="font-weight: normal" name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
using the following line
$('#select-choice-1').val('');
However it does not clear. The selected value remains intact.
http://jsfiddle.net/neilghosh/MECXW/11/
Upvotes: 0
Views: 7264
Reputation: 340055
A single-valued select
always has a selected value, which will default to the first entry.
If you want an "empty" option, you need to add it to the top of the list of options yourself, and then exclude it if it's actually used.
Upvotes: 1
Reputation: 389
You are using jQuery Mobile. So you need to refresh your component:
Check this forked fiddle: http://jsfiddle.net/guumaster/MECXW/15/ (*)
Basically you have to "refresh" it like this:
$('#select-choice-1').selectmenu('refresh');
Check the jQuery Mobile docs for Selects
(*) I've also added an option without value called "None".
Upvotes: 0
Reputation: 7954
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('select option:first').attr('selected','selected');
});
});
</script>
</head>
<body>
<select>
<option value="0">--select--</select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button>Reset</button>
</body>
</html>
Upvotes: 0
Reputation: 2762
val() is more like a shortcut for attr('value'). For your usage use text() or html() instead
Upvotes: 0