A melhor maneira de desmarcar um <select> no jQuery?

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

Qual é a melhor maneira, usando o jQuery, para desmarcar a opção com elegância?

Use removeAttr ...

$("option:selected").removeAttr("selected");

Or Prop

$("option:selected").prop("selected", false)

Existem muitas respostas aqui, mas infelizmente todas elas são bastante antigas e, portanto, dependem attr/ o removeAttrque realmente não é o caminho a percorrer.

@coffeeyesplease menciona corretamente que uma boa solução entre navegadores deve usar

$("select").val([]);

Outra boa solução entre navegadores é

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

Você pode vê-lo executar um autoteste aqui . Testado no IE 7/8/9, FF 11, Chrome 19.

Já faz um tempo que pedimos, e eu não testei isso em navegadores antigos, mas me parece uma resposta muito mais simples:

$("#selectID").val([]);

.val () também funciona para select http://api.jquery.com/val/

Método mais simples

$('select').val('')

Simplesmente usei isso no próprio select e ele fez o truque.

Estou no jQuery 1.7.1 .

Até agora, as respostas funcionam apenas para várias seleções no IE6 / 7; para a seleção não múltipla mais comum, você precisa usar:

$("#selectID").attr('selectedIndex', '-1');

Isso é explicado no post vinculado por flyfishr64. Se você olhar para ele, verá como existem 2 casos - multi / não-multi. Não há nada que o impeça de procurar uma solução completa:

$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

Oh jquery.

Como ainda existe uma abordagem nativa de javascript, sinto a necessidade de fornecer uma.

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

E apenas para mostrar o quanto mais rápido isso é: referência

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

Isso iria percorrer cada item e desmarcar apenas os que estão marcados

Um rápido google encontrou este post que descreve como fazer o que você deseja para listas de seleção únicas e múltiplas no IE. A solução também parece bastante elegante:

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

}); 

$("#select_id option:selected").prop("selected", false);

$(option).removeAttr('selected') //replace 'option' with selected option's selector

Muito obrigado pela solução.

A solução para a lista de combinação de escolha única funciona perfeitamente. Encontrei isso depois de pesquisar em muitos sites.

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");

$("option:selected").attr("selected", false);

Outra maneira simples:

$("#selectedID")[0].selectedIndex = -1

Normalmente, quando eu uso um menu de seleção, cada opção tem um valor associado. Por exemplo

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

Agora, isso não remove o atributo selecionado da opção, mas tudo o que realmente quero é o valor.

Defina um ID no seu select, como:
<select id="foo" size="2">

Então você pode usar:
$("#foo").prop("selectedIndex", 0).change();