Najlepszy sposób na odznaczenie <select> w jQuery?

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

Jaki jest najlepszy sposób, używając jQuery, aby elegancko odznaczyć opcję?

Użyj removeAttr ...

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

Lub prop

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

Tutaj jest wiele odpowiedzi, ale niestety wszystkie są dość stare i dlatego polegają na attr/ removeAttrco tak naprawdę nie jest właściwą drogą.

@coffeeyesplease poprawnie wspomina, że ​​należy użyć dobrego rozwiązania dla różnych przeglądarek

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

Innym dobrym rozwiązaniem dla różnych przeglądarek jest

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

Możesz zobaczyć, jak uruchamia się tutaj autotest . Testowane na IE 7/8/9, FF 11, Chrome 19.

Minęło trochę czasu, odkąd zapytałem, i nie testowałem tego na starszych przeglądarkach, ale wydaje mi się, że odpowiedź jest znacznie prostsza

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

.val () działa również dla select http://api.jquery.com/val/

Najprostsza metoda

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

Po prostu użyłem tego na samej selekcji i załatwiłem sprawę.

Jestem na jQuery 1.7.1 .

Odpowiedzi do tej pory działają tylko dla wielu selekcji w IE6 / 7; w przypadku bardziej powszechnego wyboru innego niż wielokrotny musisz użyć:

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

Wyjaśnia to post zamieszczony przez flyfishr64. Jeśli spojrzysz na to, zobaczysz, jak są 2 przypadki - multi / non-multi. Nic nie stoi na przeszkodzie, byś wybrał jedno i drugie rozwiązanie:

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

Och jquery.

Ponieważ istnieje jeszcze natywne podejście do javascript, czuję potrzebę jego zapewnienia.

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

I po prostu, aby pokazać, jak szybko to jest: test porównawczy

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

Spowodowałoby to iterację każdego elementu i odznaczenie tylko tych, które są zaznaczone

Szybki google znalazł ten post, który opisuje, jak robić to, co chcesz dla pojedynczej i wielu list wyboru w IE. Rozwiązanie wydaje się również dość eleganckie:

$('#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

Wielkie dzięki za rozwiązanie.

Rozwiązanie dla listy kombi z jednym wyborem działa idealnie. Znalazłem to po przeszukaniu wielu stron.

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

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

Kolejny prosty sposób:

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

Zwykle, gdy korzystam z menu wyboru, do każdej opcji jest przypisana wartość. Na przykład

<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

To nie usuwa wybranego atrybutu z opcji, ale tak naprawdę chcę tylko wartości.

Ustaw identyfikator w swoim wyborze, na przykład:
<select id="foo" size="2">

Następnie możesz użyć:
$("#foo").prop("selectedIndex", 0).change();