Jak wybrać konkretną opcję w elemencie SELECT w jQuery?

716

Jeśli znasz indeks, wartość lub tekst. także jeśli nie masz identyfikatora do bezpośredniego odniesienia.

To , to i to są pomocne odpowiedzi.

Przykładowy znacznik

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>
Jay Corbett
źródło
46
$("#my_select").val("the_new_value").change();... ... od so
dsdsdsdsd

Odpowiedzi:

1205

Selektor, aby uzyskać środkowy element opcji według wartości, to

$('.selDiv option[value="SEL1"]')

W przypadku indeksu:

$('.selDiv option:eq(1)')

W przypadku znanego tekstu:

$('.selDiv option:contains("Selection 1")')

EDYCJA : Jak skomentowano powyżej PO mógł być po zmianie wybranego elementu menu rozwijanego. W wersji 1.6 i wyższej zalecana jest metoda prop ():

$('.selDiv option:eq(1)').prop('selected', true)

W starszych wersjach:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDYCJA 2 : po komentarzu Ryana. Dopasowanie „Selection 10” może być niepożądane. Nie znalazłem selektora pasującego do pełnego tekstu, ale działa filtr :

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDYCJA 3 : Zachowaj ostrożność, $(e).text()ponieważ może zawierać nowy wiersz, co spowoduje, że porównanie się nie powiedzie. Dzieje się tak, gdy opcje są niejawnie zamknięte (bez </option>znacznika):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

Jeśli po prostu użyjesz e.textdodatkowych białych znaków, takich jak końcowy znak nowej linii, zostanie usunięty, dzięki czemu porównanie będzie bardziej niezawodne.

Grastveit
źródło
8
: zawiera nie jest świetne, ponieważ będzie pasować do fragmentów tekstu; problematyczne, jeśli dowolny tekst opcji jest podciągiem innego tekstu opcji.
Ryan
26
Działa to również $ ('# id opcja [wartość = "0"]'). Attr ('selected', 'selected');
DevC,
@Grastveit, jak zmienić kolor pierwszej opcji, jeśli jest ona wybrana, czy nie, gdy ma klasę, powiedz myClass. Dzięki
Zaker
@ Użytkownik Nie rozumiem. Może opublikujesz to w nowym pytaniu? A może to $ („. SelDiv .myClass”). Css („kolor”, „czerwony”)?
Grastveit
6
Chciałbym dodać, że ZAWSZE należy używać prop, a nie attr. Niemal zwariowałem, próbując debugować aplikację i zmieniłem z ATTR na Prop, aby to naprawić.
user609926,
125

Żadna z powyższych metod nie zapewniła rozwiązania, którego potrzebowałem, więc pomyślałem, że dostarczę to, co zadziałało dla mnie.

$('#element option[value="no"]').attr("selected", "selected");
użytkownik1074546
źródło
10
Zauważ, że od jQuery 1.6 powinno to używać, propa nie attr.
Gone Coding
@GoneCoding Korzystanie .attrjest poprawne. „selected” jest atrybutem <option> w3.org/TR/html5/forms.html#attr-option-selected
Carlos Llongo
3
@CllosLlongo: To nie ma znaczenia. Zaleceniem jQuery jest zawsze używanie propprzed attr. To oszczędza konieczności sprawdzania każdej właściwości na w3.org, aby sprawdzić, czy jest to tylko atrybut, czy też implementacja z działaniami wspierającymi.
Gone Coding
81

Możesz po prostu użyć val()metody:

$('select').val('the_value');
Leandro Ardissone
źródło
20
Jest to złe, ponieważ USTAWIAsz wartość WSZYSTKICH elementów SELECT do the_value. .val nie jest funkcją wyboru / filtra! Jest to moduł dostępu do właściwości, a przekazanie go przez ten ciąg ustawia wartość. Próbowałem wycofać swoje poparcie, ale spóźniłem się po tym, jak uświadomiłem to sobie w testach.
AaronLS
4
Czy masz 10 głosów jako przydatną odpowiedź? Val () to getter i setter. Jeśli użyjesz tylko val (), otrzymasz wartość. Jeśli zdasz coś takiego jak val ('the_value'), ustawisz na 'the_value'
Gui
11
Proszę @AaronLS i @guilhermeGeek, zapoznaj się z dokumentacją (ostatni przykład). Działa jako selektor dla wyboru, pól wyboru i przycisków opcji, a także jako ustawiacz wartości dla wprowadzania tekstu i obszarów tekstowych.
Leandro Ardissone
9
Źle odczytałeś dokumentację. W przypadku pól wyboru, radiotelefonów i listbox polecenie ustawia atrybut „selected” dla tych elementów. Ostatni przykład pokazuje, jak przekazanie val („pole wyboru 1”) powoduje, że zostaje on wybrany. Nie jest to to samo co „selektor” pod względem uzyskiwania obiektów za pomocą selektora CSS / jquery. Przetestowałem twój kod, nie działa on na najniższym poziomie.
AaronLS
26
+1: nie, to nie jest selektor JQuery, jednak myślę, że większość osób szukających tego pytania jest jak ja i po prostu chce zmienić aktualnie wybraną opcję; wymyślenie właściwego selektora to tylko sposób na zrobienie tego. Jest to z pewnością lepsze niż odpowiedzi, które widziałem, które powtarzają wszystkie opcje.
kdgregory
57

Pod względem wartości, co działało dla mnie z jQuery 1.7, był poniższy kod, spróbuj tego:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
mpoletto
źródło
5
Nie jestem pewien, czy potrzebujesz metody .change ().
Phillip Senn
6
To .change()było konieczne. Miałem przykład, w którym zmieniałem miniatury w oparciu o WYBÓR. Kiedy przesłałem niestandardowy motyw, miał on wybrać „Motyw niestandardowy” z listy opcji. .prop()Wywołanie działało, ale bez .change()obraz miniatur po prawej moja wybierz nigdy aktualizowana.
Volomike,
2
.change () była najlepszą radą. +1
Ja8zyjits
1
Uwaga: propwartość logiczna generuje to samo wyjście. np..prop('selected', true)
Gone Coding
Zależy, niektóre przeglądarki - może stare przeglądarki - wymagają ciągu „zaznaczone”. Myślę, że większość z nich obsługuje ciąg tekstowy.
mpoletto
16

Można to zrobić na wiele sposobów, ale najczystsze podejście zaginęło wśród najlepszych odpowiedzi i mnóstwa argumentów val(). Zmieniono także niektóre metody od wersji jQuery 1.6, więc wymaga to aktualizacji.

W poniższych przykładach założę, że zmienna $selectjest obiektem jQuery wskazującym na pożądany <select>znacznik, np. Przez:

var $select = $('.selDiv .opts');

Uwaga 1 - użyj val () dla dopasowań wartości:

W przypadku dopasowywania wartości użycie val()jest znacznie prostsze niż użycie selektora atrybutów: https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

Wersja Settera .val()jest zaimplementowana w selecttagach poprzez ustawienie selectedwłaściwości dopasowania optionz tym samym value, więc działa dobrze we wszystkich nowoczesnych przeglądarkach.

Uwaga 2 - użyj prop („wybrane”, prawda):

Jeśli chcesz bezpośrednio ustawić wybrany stan opcji, możesz użyć prop(nie attr) booleanparametru (zamiast wartości tekstowej selected):

np. https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

Uwaga 3 - zezwól na nieznane wartości:

Jeśli użyjesz, val()aby wybrać <option>, ale wartość val nie jest dopasowana (może się zdarzyć w zależności od źródła wartości), wówczas „nic” zostanie wybrane i $select.val()nastąpi powrót null.

Tak więc dla pokazanego przykładu i ze względu na solidność możesz użyć czegoś takiego : https://jsfiddle.net/1250Ldqn/ :

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

Uwaga 4 - dokładne dopasowanie tekstu:

Jeśli chcesz dopasować według dokładnego tekstu, możesz użyć filterfunkcji with. np. https://jsfiddle.net/yz7tu49b/2/ :

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

chociaż jeśli możesz mieć dodatkowe białe znaki, możesz dodać wykończenie do czeku jak w

    return $.trim(this.text) == "some value to match";

Uwaga 5 - dopasowanie według indeksu

Jeśli chcesz dopasować według indeksu, po prostu zindeksuj dzieci wybranych, np. Https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

Chociaż obecnie staram się unikać bezpośrednich właściwości DOM na rzecz jQuery, do kodu przyszłościowego, więc można to również zrobić jako https://jsfiddle.net/yz7tu49b/5/ :

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

Uwaga 6 - użyj zmiany (), aby uruchomić nowy wybór

We wszystkich powyższych przypadkach zdarzenie zmiany nie jest uruchamiane. Jest to zaprojektowane tak, abyś nie kończył się rekurencyjnymi zmianami.

Aby w razie potrzeby wygenerować zdarzenie zmiany, po prostu dodaj wywołanie do obiektu .change()jQuery select. np. pierwszym najprostszym przykładem jest https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

Istnieje również wiele innych sposobów na znalezienie elementów za pomocą selektorów atrybutów, takich jak [value="SEL2"], ale musisz pamiętać, że selektory atrybutów są stosunkowo wolne w porównaniu do wszystkich innych opcji.

Gone Coding
źródło
13

Możesz nazwać zaznaczenie i użyć tego:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

Powinien wybrać żądaną opcję.

Sandro
źródło
12
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");
João Paulo Oliveira
źródło
Dziękujemy za Twój post, ale co ta odpowiedź dodaje do rozmowy, która nie jest uwzględniona w zaakceptowanych odpowiedziach?
Edward
jeśli jest już wybrana opcja, to się nie powiedzie, ponieważ menu rozwijane nie może wybrać więcej niż jednego elementu, chyba że jest to wielokrotny wybór. Musisz zrobić .prop ('selected', true)
derekcohen
9

Odpowiadając na moje pytanie dotyczące dokumentacji. Jestem pewien, że istnieją inne sposoby na osiągnięcie tego, ale to działa i ten kod jest testowany.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>
Jay Corbett
źródło
9

Dokładnie to zadziała, wypróbuj poniższe metody

Dla normalnej opcji wyboru

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

Do wyboru 2 opcji należy użyć opcji wyzwalania

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>
perumal N.
źródło
8

Korzystając z jquery-2.1.4 , znalazłem dla siebie następującą odpowiedź:

$('#MySelectionBox').val(123).change();

Jeśli masz wartość ciągu, spróbuj wykonać następujące czynności:

$('#MySelectionBox').val("extra thing").change();

Inne przykłady nie działały dla mnie, dlatego dodam tę odpowiedź.

Oryginalną odpowiedź znalazłem na: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

raddevus
źródło
8

Aby ustawić wartość wyboru z wybranym wyzwalaniem:

$('select.opts').val('SEL1').change();

Aby ustawić opcję z zakresu:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

W tym kodzie użyj selektora, aby znaleźć obiekt wyboru z warunkiem, a następnie zmień wybrany atrybut za pomocą attr().


Następnie polecam dodać change()zdarzenie po ustawieniu atrybutu selected, po wykonaniu tej czynności kod dobiegnie do zmiany wyboru przez użytkownika.

Nick Tsai
źródło
6

Korzystam z tego, gdy znam indeks listy.

$("#yourlist :nth(1)").prop("selected","selected").change();

Umożliwia to zmianę listy i uruchomienie zdarzenia zmiany. „: Nth (n)” liczy się od indeksu 0

Miguel
źródło
5

pójdę z: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
użytkownik2606817
źródło
5

Spróbuj tego

po prostu używasz select id pola zamiast # id (tj. # select_name)

zamiast wartości opcji użyj wartości opcji wyboru

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>
perumal N.
źródło
3

Dla Jquery wybrano, jeśli wyślesz atrybut do funkcji i musisz zaktualizować opcję select

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
Andrej Gaspar
źródło
3
/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>
Pratik Kamani
źródło
1

$('select').val('the_value');Wygląda właściwe rozwiązanie, a jeśli masz wiersze tabeli danych, wówczas:

$row.find('#component').val('All');
Jitesh Sojitra
źródło
1

jeśli nie chcesz używać jQuery, możesz użyć poniższego kodu:

document.getElementById("mySelect").selectedIndex = "2";
MIGOTANIE
źródło
1

Dzięki za pytanie. Mam nadzieję, że ten fragment kodu zadziała dla Ciebie.

var val = $("select.opts:visible option:selected ").val();
Md. Russel Hussain
źródło
0
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

lub

$('#select option[value="myValue"]').prop("selected",true).trigger("change");
Tony Duran
źródło
Edytuj swoją odpowiedź, aby kod był sformatowany jako kod. Zrób to za pomocą paska narzędzi lub po prostu wcięcie wszystkich wierszy każdego bloku kodu o cztery spacje.
beruic