Sprawdź, czy opcja jest wybrana za pomocą jQuery, jeśli nie, wybierz domyślną

207

Za pomocą jQuery sprawdź, czy w menu wyboru wybrano opcję, a jeśli nie, przypisz jedną z wybranych opcji.

(Selekcja jest generowana z labiryntem funkcji PHP w aplikacji, którą właśnie odziedziczyłem, więc jest to szybka poprawka, podczas gdy ja się nimi zajmuję :)

meleyal
źródło

Odpowiedzi:

270

Chociaż nie jestem pewien, co dokładnie chcesz osiągnąć, ten fragment kodu zadziałał dla mnie.

<select id="mySelect" multiple="multiple">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length) {
    $("#mySelect option[value='3']").attr('selected', 'selected');
  }
});
</script>
Joe Lencioni
źródło
86
Wybór byłby łatwiejszy do odczytania w następujący sposób:$("#mySelect").val(3);
Jørn Schou-Rode
6
To sprawiło, że znalazłem się na dobrej drodze, ale musiałem to zrobić: $("#mySelect option")[2]['selected'] = true; zorientowałem się po zbadaniu struktur obiektów w Firebug.
semperos
28
Od jQuery 1.6 możesz ustawić właściwość bezpośrednio. $("#mySelect").prop("selectedIndex", 2)
gradbot
1
Wersja .val (x) nie działa w Internet Explorerze 8, więc @gradbot ma rację, ponieważ działa we wszystkich przeglądarkach.
Sorcy
30

Nie trzeba do tego używać jQuery:

var foo = document.getElementById('yourSelect');
if (foo)
{
   if (foo.selectedIndex != null)
   {
       foo.selectedIndex = 0;
   } 
}
FlySwat
źródło
58
OP stwierdził: „Korzystanie z jQuery ...”, więc zignorowanie tego wydaje się zbyteczne, nie?
BryanH
13
Osobiście, jeśli zadam konkretne pytanie, chciałbym uzyskać odpowiedź na pytanie zamiast w inny sposób.
vitto
18
Czasami szukasz odpowiedzi, której nie szukasz.
MrBoJangles
5
Niezależnie od tego poprosił o jQuery, a odpowiedź na jQuery jest nieco łatwiejsza do zrozumienia, szczególnie jeśli nie rozumie się podstawowego JavaScript.
shmeeps
6
Doskonały sposób na zrobienie tego, czasem bazowy javascript może być bardzo przydatny!
Hallaghan
13

To pytanie jest stare i ma wiele poglądów, więc po prostu wyrzucę kilka rzeczy, które pomogą niektórym ludziom jestem pewien.

Aby sprawdzić, czy wybrany element ma wybrane elementy:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); }

lub aby sprawdzić, czy zaznaczenie nic nie wybrało:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); }

lub jeśli jesteś w jakiejś pętli i chcesz sprawdzić, czy wybrany jest bieżący element:

$('#mySelect option').each(function() {
    if ($(this).is(':selected')) { .. }
});

aby sprawdzić, czy element nie jest zaznaczony w pętli:

$('#mySelect option').each(function() {
    if ($(this).not(':selected')) { .. }
});

Oto niektóre ze sposobów, aby to zrobić. jQuery ma wiele różnych sposobów na osiągnięcie tego samego, więc zwykle wybierasz tylko ten, który wydaje się najbardziej wydajny.

Gavin
źródło
„nie” nie działało dla mnie $ ('# mySelect option'). each (function () {if ($ (this) .not (': selected')) {..}}); Więc zastosowana negacja jest jak jeśli (! $ (This) .is (': selected')) {..} Przeglądarka: Chrome; Wersja Jquery: 3.1.1
Anil Kumar
12

Polecam odpowiedź lencioni . Możesz zmienić selektor opcji, ('#mySelect option:last')aby wybrać opcję o określonej wartości za pomocą „ #mySelect option[value='yourDefaultValue']”. Więcej na temat selektorów .

Jeśli intensywnie pracujesz z wybranymi listami na kliencie, sprawdź tę wtyczkę: http://www.texotela.co.uk/code/jquery/select/ . Spójrz na źródło, jeśli chcesz zobaczyć więcej przykładów pracy z listami wyboru.

Alex Pendleton
źródło
9

Oto moja funkcja zmieniająca wybraną opcję. Działa dla jQuery 1.3.2

function selectOption(select_id, option_val) {
    $('#'+select_id+' option:selected').removeAttr('selected');
    $('#'+select_id+' option[value='+option_val+']').attr('selected','selected');   
}
sata
źródło
7
<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length)
   $("#mySelect").val( 3 );

});
</script>
Ram Prasad
źródło
3

Łatwo! Domyślnie powinna być pierwsza opcja. Gotowe! Doprowadziłoby to do dyskretnego JavaScript, ponieważ JavaScript nie jest potrzebny :)

Dyskretny JavaScript

Martin Labuschin
źródło
3

Natrafiłem już na wspomnianą wtyczkę texotela , która pozwoliła mi ją rozwiązać w następujący sposób:

$(document).ready(function(){
    if ( $("#context").selectedValues() == false) {
    $("#context").selectOptions("71");
    }
});
meleyal
źródło
2

Spójrz na selectedIndex na selectelemencie. BTW, to zwykła rzecz DOM, a nie specyficzne dla JQuery.

Hank Gay
źródło
2

To był szybki skrypt, który okazał się działać ... .Result jest przypisany do etykiety.

$(".Result").html($("option:selected").text());
Joel
źródło
1

Robicie zdecydowanie za dużo na wybór. Po prostu wybierz według wartości:

$("#mySelect").val( 3 );
Giagejoe
źródło
2
To wybiera opcję 3, niezależnie od tego, czy wybrano już inną opcję.
Jordan Ryan Moore,
1
if (!$("#select").find("option:selected").length){
  //
}
Avinash Saini
źródło
1

Znalazłem dobry sposób, aby sprawdzić, czy opcja jest zaznaczona i wybierz domyślną, gdy nie jest.

    if(!$('#some_select option[selected="selected"]').val()) {
        //here code if it HAS NOT selected value
        //for exaple adding the first value as "placeholder"
        $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>');
    }

Jeśli #some_select nie ma domyślnie wybranej opcji, to .val () jest niezdefiniowany

Marcin Bąk
źródło
0
$("option[value*='2']").attr('selected', 'selected');
// 2 for example, add * for every option
użytkownik420944
źródło
0
$("#select_box_id").children()[1].selected

Jest to kolejny sposób sprawdzenia, czy opcja jest zaznaczona lub nie w jquery. Zwróci to wartość logiczną (prawda lub fałsz).

[1] jest indeksem opcji wyboru pola

Taimoor Changaiz
źródło
0

Zmień zdarzenie w polu wyboru, aby uruchamiało się, a kiedy to zrobi, po prostu wyciągnij atrybut id wybranej opcji: -

$("#type").change(function(){
  var id = $(this).find("option:selected").attr("id");

  switch (id){
    case "trade_buy_max":
      // do something here
      break;
  }
});
Akash Deep Singhal
źródło
0

Właśnie szukałem czegoś podobnego i znalazłem to:

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true);

Znajduje to wszystkie wybrane menu w klasie, które nie mają jeszcze wybranej opcji, i wybiera opcję domyślną (w tym przypadku „2”).

Próbowałem użyć :selectedzamiast [selected], ale to nie działało, ponieważ coś jest zawsze wybrane, nawet jeśli nic nie ma atrybutu

Steven Schoch
źródło
0

Jeśli musisz wyraźnie zaznaczyć każdą opcję, aby zobaczyć, czy jakaś ma atrybut „zaznaczony”, możesz to zrobić. W przeciwnym razie skorzystasz option:selectedz wartości pierwszej opcji domyślnej.

var viewport_selected = false;      
$('#viewport option').each(function() {
    if ($(this).attr("selected") == "selected") {
        viewport_selected = true;
    }
});
zeman
źródło