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

Jeśli znasz indeks, wartość lub tekst. również jeśli nie masz identyfikatora w celu 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>
 606
jquery
Author: Community, 2008-11-24
Source

19 answers

Selektor, aby uzyskać środkową opcję-element według wartości to 

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

Dla indeksu: 

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

Dla znanego tekstu: 

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

EDIT: Jak skomentowano powyżej, operacja mogła być po zmianie wybranej pozycji z listy rozwijanej. 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')

EDIT2: po komentarzu Ryana. Dopasowanie na "selekcja 10" może być niechciane. Nie znalazłem selektor aby dopasować pełny tekst, ale filtr Działa: 

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

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

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

Jeśli po prostu użyjesz e.text wszelkie dodatkowe spacje, takie jak końcowy znak nowej linii, zostaną usunięte, dzięki czemu porównanie będzie bardziej wytrzymałe.

 1056
Author: Grastveit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-16 06:31:37

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

$('#element option[value="no"]').attr("selected", "selected");
 105
Author: user1074546,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-01 02:25:34

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

$('select').val('the_value');
 69
Author: Leandro Ardissone,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-12-02 19:49:50

Według 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();
 44
Author: mpoletto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-10 22:47:59

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

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

Powinien wybrać żądaną opcję.

 12
Author: Sandro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-01 21:02:15

Istnieje wiele sposobów, aby to zrobić, ale najczystsze podejście zostało utracone wśród najlepszych odpowiedzi i mnóstwo argumentów na val(). Również niektóre metody zmieniły się od jQuery 1.6, więc wymaga to aktualizacji.

Dla poniższych przykładów zakładam, że zmienna $select jest obiektem jQuery wskazującym na żądany znacznik <select>, np. poprzez:

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

Uwaga 1-Użyj val () dla dopasowania wartości:

Do dopasowania wartości, użycie val() jest znacznie prostsze niż użycie selektor atrybutów: https://jsfiddle.net/yz7tu49b/6/ 

$select.val("SEL2");

Wersja settera .val() jest zaimplementowana na znacznikach select poprzez ustawienie właściwości selected pasującego option z tym samym value, więc działa dobrze we wszystkich nowoczesnych przeglądarkach.

Uwaga 2-Użyj prop ('selected', true):

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

Np. https://jsfiddle.net/yz7tu49b/ 

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

Uwaga 3-Zezwalaj 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), wtedy zostanie wybrana opcja " nic " i $select.val() zwróci null.

Więc na pokazany przykład i ze względu na solidność, przydałoby się coś takiego https://jsfiddle.net/1250Ldqn/:

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

Uwaga 4-dokładny tekst dopasowanie:

Jeśli chcesz dopasować dokładny tekst, możesz użyć filter z funkcją. 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 spacje, 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 select np. https://jsfiddle.net/yz7tu49b/3/ 

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

Chociaż mam tendencję do unikania bezpośrednich właściwości DOM w w dzisiejszych czasach jQuery, do przyszłościowego kodu, 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 funkcji change (), aby uruchomić nową selekcję

We wszystkich powyższych przypadkach zdarzenie zmiany nie zostanie wywołane. Jest to z założenia tak, aby nie skończyć z rekurencyjnymi zdarzeniami zmiany.

Aby wygenerować Zdarzenie change, w razie potrzeby wystarczy dodać wywołanie .change() do obiektu jQuery select. np. pierwszy najprostszy przykład staje się https://jsfiddle.net/yz7tu49b/7/ 

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

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

 11
Author: Gone Coding,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-06 12:13:09 
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");
 10
Author: João Paulo Oliveira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-16 18:17:00

/ Align = "left" / Jestem pewien, że są inne sposoby, aby to osiągnąć, 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>
 9
Author: Jay Corbett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-24 16:19:40

Używając jquery-2.1.4 znalazłem dla mnie następującą odpowiedź: 

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

Jeśli masz wartość ciągu spróbuj: 

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

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

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

 7
Author: raddevus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-05 14:58:54

Używam tego, gdy znam indeks listy.

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

Pozwala to na zmianę listy i wywołanie zdarzenia change. ": Nth (n) " liczy się od indeksu 0

 6
Author: Miguel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-11 13:47:34

Pójdę z:-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
 5
Author: user2606817,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-14 08:22:57

Do ustawienia wartości select z zaznaczeniem: 

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

Dla ustawienia opcji z zakresu: 

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

Ten kod użyj selektora, aby znaleźć zaznaczony obiekt z warunkiem, a następnie zmień wybrany atrybut przez attr().

Dalej, polecam dodać zdarzenie change() Po ustawieniu atrybutu na selected, w ten sposób Kod zakończy się zmianą select przez użytkownika.

 4
Author: Nick Tsai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-22 04:44:22

Dla jQuery wybranego jeśli wysyłasz atrybut do funkcji i musisz zaktualizować-wybierz opcję 

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
 3
Author: Andrej BlackFlash,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-01 14:11:57 
/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>
 3
Author: Pratik Kamani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-30 06:49:20

Spróbuj tego

wystarczy użyć select field id zamiast #id (np.# select_name)

zamiast wartość opcji użyj opcji wybierz wartość

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>
 3
Author: perumal N,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-22 18:27:57

$('select').val('the_value'); wygląda dobrze i jeśli masz wiersze tabeli danych to: 

$row.find('#component').val('All');
 1
Author: Jitesh Sojitra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-14 13:36:26

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

document.getElementById("mySelect").selectedIndex = "2";
 1
Author: FLICKER,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-04 02:06:03

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

var val = $("select.opts:visible option:selected ").val();
 1
Author: Md. Russel Hussain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-23 04:12:15

Spróbuj tego nowego

Dokładnie to zadziała 

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>
 0
Author: perumal N,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-17 05:04:54