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

219
<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żytkownik198729
źródło

Odpowiedzi:

348

Użyj removeAttr ...

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

Lub prop

$("option:selected").prop("selected", false)
Ei Maung
źródło
3
Nie działa w IE 8. Zobacz stackoverflow.com/questions/7960773/...
Clinton Pierce
60
Ta odpowiedź nie jest sposobem na robienie rzeczy (i nie działa uniwersalnie podczas uruchamiania). Prawidłowe podejście to albo .val([])albo .prop("selected", false)- przewiń w dół.
Jon
1
JQuery musiał to naprawić, działa idealnie dla mnie w IE8 przy użyciu JQuery 1.7.2.
Mikey G
2
LUB .val (['']), aby wybrać pustą wartość, jeśli istnieje.
Mark
2
$("option:selected").prop("selected", false)czasami nie działa. (nie działa w przeglądarce Chrome z jquery v1.4.2)
Rohit Goyani
163

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.

Jon
źródło
1
Znacznie lepsza niż wybrana odpowiedź (działa w różnych przeglądarkach i nie wymaga bałaganu z zestawami atrybutów)
Timothy Groote
1
Idealna odpowiedź na odznaczenie wszystkich opcji. Ale tak naprawdę nie można go użyć do odznaczenia określonych opcji, podczas gdy removeAttr może.
Mikey G
2
@MikeyG: To , zauważając, że Array.indexOfwymaga wypełnienia dla IE <9 (lub możesz użyć dowolnej równoważnej metody, którą zapewnia wiele bibliotek JS).
Jon
1
Czy później sprawdziłeś HTML $('#select').val([]);? Niestety nie usuwa tego selected="selected"atrybutu. Może to spowodować opublikowanie niewłaściwych danych. Nie polecam tego podejścia!
Fr0zenFyr
1
@ Fr0zenFyr: Jeśli zaczniesz od wstępnie wybranej opcji i odznaczysz ją ręcznie za pomocą kliknięcia myszą, to również nie usunie atrybutu - a mimo to przesłanie formularza jest gwarancją opublikowania poprawnych danych. Istnieje duża różnica między atrybutami HTML (które określają stan początkowy) a właściwościami DOM (które określają, co jest wyświetlane, a co przesyłane). Z tego powodu rozwiązania skupiające się na tym atrybucie są nieprawidłowe. Atrybut określa wartość początkową właściwości, ale jest ona tak dalece, jak to możliwe.
Jon
24

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/

poproszę kawę
źródło
To najlepszy sposób i faktycznie usuwa wartość w większości przeglądarek - dzięki.
Sagive SEO,
Działa to tylko w przypadku wielokrotnego wyboru. $("select option").prop("selected", false);działa uniwersalnie (na selekcje wielokrotne i pojedyncze).
rozbryzguje się
23

Najprostsza metoda

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

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

Jestem na jQuery 1.7.1 .

Joshua Pinter
źródło
1
Właśnie spotkałem się z jednym problemem związanym z tym rozwiązaniem. Tag opcji nadal będzie miał atrybut „wybrany”
Tamara,
@Tamara Naprawdę? Nie sprawdziłem. Czy używasz do tego czegoś „wybrano”, a to zepsuło Ci wszystko?
Joshua Pinter,
19

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");
thetoolman
źródło
7

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

Blaine Kasten
źródło
Dziękuję za tę odpowiedź bez jQuery! :)
Saromase
6
$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

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

DinoMyte
źródło
5

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);

}); 
Jeff Paquette
źródło
4
$("#select_id option:selected").prop("selected", false);
premkumar
źródło
3
$(option).removeAttr('selected') //replace 'option' with selected option's selector
Brandon Henry
źródło
3

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");
Madeswaran Govindan
źródło
2
$("option:selected").attr("selected", false);
Charlie Brown
źródło
2

Kolejny prosty sposób:

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

Rafael
źródło
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.

jtaz
źródło
0

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

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

TheAlphaGhost
źródło