CODEWITHSUNDEEP
javascriptjqueryselect
Tamara
Tamara

Reputation: 2980

jQuery: unselect option in select element

I faced with a strange behaviour of select element. So, I have a select element with several options. One of option is empty - it's required by plugin to output placeholder.

I needed functionality that would clear selected options and I wrote something like:

$(element).val('');
$(element).find("option:selected").removeAttr("selected");

The thing is that "selected" attribute is still here and it's on old option - you can see it in the code sample.

So, I have 2 questions:

1) Why .val() method of jQuery library do not update "selected" attribute in options list?

2) Why I can not update "selected" attribute in my case? If I switch these statements it's working:

$(element).find("option:selected").removeAttr("selected");
$(element).val('');

Code sample:

$(function(){


  $("#unselect").click(function(){
    
    $("#lang_type").val('');
    $("#lang_type").find("option:selected").removeAttr("selected");
    alert($("#lang_type").html());
    
  });




});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_type">
<option value=""></option>
<option value="01">01 - Language of text</option>
<option value="02">02 - Original language of a translated text</option>
<option selected="selected" value="03">03 - Language of abstracts</option>
<option value="04">04 - Rights language</option>
<option value="05">05 - Rights-excluded language</option>
<option value="06">06 - Original language in a multilingual edition</option>
<option value="07">07 - Translated language in a multilingual edition</option>
<option value="08">08 - Language of audio track</option>
<option value="09">09 - Language of subtitles</option>
</select>

<button id="unselect">Unselect</button>

Upvotes: 0

Views: 5934

Answers (3)

Nutshell
Nutshell

Reputation: 8537

EDIT: You can use prop(false) property like this 

$(function(){
  $("#unselect").click(function(){    
    $("#lang_type").val('');
    $("#lang_type").find("option:selected").prop('selected',false);
  });
});

Like @yezzz said, read this :
Note: Do not use removeProp() method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Upvotes: 4

rhino
rhino

Reputation: 13881

The selected attribute reflects merely the initial state of the select input. You shouldn't really care about removing it, as it affects nothing once a different option is selected (either by the user or by a script on your page).

The current state of the input can be read or modified via the selectedIndex property, where a value of -1 means no option is selected (which never is the default, as there always is an option selected initially). However, you seem to want to select a particular "empty" option. Setting the value on a select box results in the corresponding option being selected, which, in your case, is the very first one.

The code probably does exactly what you want. So don't mind checking the HTML, as the selected attribute - again - is unrelated to the current state of the input.

The :selected selector, however, matches the elements that are currently selected. Your first snippet selects an option, thus making it :selected, then attempts to remove a non-existent attribute from it. The second snippet of yours assumes that the selection remains on the option that was initially selected, and then removes the attribute from it. What follows is the "empty" option getting selected, and no more steps need to be taken, as that's all it takes to select an option.

To summarize: you can safely drop all the code that deals with the removal of the selected attribute, as it doesn't affect the current state of the element, the state being already tied to the correct option.

Upvotes: 0

frIT
frIT

Reputation: 3285

If I'm not mistaken, a multi-select can be initially unselected, but once any option is selected, it can not be unselected any more. RFC 1866 states in section 8.1.3:

The initial state has the first option selected, unless a SELECTED attribute is present on any of the elements.

This lets me to believe that one option MUST always be selected. Obviously, different browsers interpret this differently...

But it does not seem to be a jQuery issue, rather a browser implementation issue.

Upvotes: 1

Related Questions