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>

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.

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

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

$('select').val('the_value');

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

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.

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

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

Powinien wybrać żądaną opcję.

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

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>

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>

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

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.

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

pójdę z: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

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>

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

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

$('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');

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

document.getElementById("mySelect").selectedIndex = "2";

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

var val = $("select.opts:visible option:selected ").val();

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

lub

$('#select option[value="myValue"]').prop("selected",true).trigger("change");