CODEWITHSUNDEEP
jqueryhtml
Neil
Neil

Reputation: 6039

clear the value in select form element using jquery

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

Answers (4)

Alnitak
Alnitak

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

Guumaster
Guumaster

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

coolguy
coolguy

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

Rahul Borkar
Rahul Borkar

Reputation: 2762

val() is more like a shortcut for attr('value'). For your usage use text() or html() instead

Upvotes: 0

Related Questions