Mam zaznaczone pole:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

Chciałbym ustawić jedną z opcji jako „wybraną” na podstawie wybranego indeksu.

Na przykład, jeśli próbuję ustawić „Numer 3”, próbuję tego:

$('#selectBox')[3].attr('selected', 'selected');

Ale to nie działa. Jak ustawić wybraną opcję na podstawie jej indeksu za pomocą jQuery?

Dzięki!

UWAGA : odpowiedź zależy od jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Dzięki za komentarz, .getnie zadziała, ponieważ zwraca element DOM, a nie element jQuery. Pamiętaj, że .eqfunkcja może być używana również poza selektorem, jeśli wolisz.

$('#selectBox option').eq(3).prop('selected', true);

Możesz także być bardziej zwięzły / czytelny, jeśli chcesz użyć tej wartości , zamiast polegać na wyborze konkretnego indeksu :

$("#selectBox").val("3");

Uwaga: .val(3) działa również w tym przykładzie, ale wartości nienumeryczne muszą być łańcuchami, więc wybrałem ciąg dla zachowania spójności.
(np. <option value="hello">Number3</option>wymaga użycia .val("hello"))

Może to również być przydatne, więc pomyślałem, że dodam go tutaj.

Jeśli chcesz wybrać wartość na podstawie wartości elementu, a nie jego indeksu, możesz wykonać następujące czynności:

Twoja wybrana lista:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

Jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

Wybrany element będzie teraz „numerem 2”.

Spróbuj zamiast tego:

$("#selectBox").val(3);

Jeszcze prościej:

$('#selectBox option')[3].selected = true;

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

gdy chcesz dokonać wyboru za pomocą najlepszych sposobów wyboru zestawu, możesz użyć
$('#select option').removeAttr('selected');do usunięcia poprzednich zaznaczeń.

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

Ważne jest, aby zrozumieć, że val()dla selectelementu zwraca wartość wybranej opcji, ale nie liczbę elementów, jak selectedIndexw javascript.

Aby wybrać opcję value="7", możesz po prostu użyć:

$('#selectBox').val(7); //this will select the option with value 7.

Aby odznaczyć opcję, użyj pustej tablicy:

$('#selectBox').val([]); //this is the best way to deselect the options

I oczywiście możesz wybrać wiele opcji *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* Jednak aby wybrać wiele opcji, <select>element musi mieć MULTIPLEatrybut, w przeciwnym razie nie będzie działać.

Zawsze miałem problemy z prop („wybrane”), zawsze działały dla mnie następujące rzeczy:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

Spróbuj tego:

$('select#mySelect').prop('selectedIndex', optionIndex);

W końcu uruchom zdarzenie .change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

Mam nadzieję, że to może pomóc

$('#selectBox option[value="3"]').attr('selected', true);

wybierz trzecią opcję

$('#selectBox').val($('#selectBox option').eq(2).val());

Przykład na jsfiddle

NB:

$('#selectBox option')[3].attr('selected', 'selected') 

jest niepoprawny, szacunek do tablicy daje ci obiekt dom, a nie obiekt jquery, więc zawiedzie z TypeError, na przykład w FF z: „$ ('# opcja selectBox') [3] .attr () nie jest funkcją . ”

Aby wyjaśnić odpowiedzi Marca i Johna Kugelmana, możesz użyć:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() nie będzie działać, jeśli zostanie użyty w określony sposób, ponieważ pobiera obiekt DOM, a nie obiekt jQuery, więc następujące rozwiązanie nie będzie działać:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()pobiera filtry zestaw jQuery do tego elementu o określonym indeksie. To jest wyraźniejsze niż $($('#selectBox option').get(3)). To nie jest tak wydajne. $($('#selectBox option')[3])jest bardziej wydajny (patrz przypadek testowy ).

Jednak tak naprawdę nie potrzebujesz obiektu jQuery. To załatwi sprawę:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Jeszcze jeden niezwykle ważny punkt:

Atrybut „selected” nie określa sposobu wyboru wybranego przycisku opcji (przynajmniej w przeglądarce Firefox i Chrome). Użyj atrybutu „zaznaczone”:

$('#selectBox option')[3].checked = true;

To samo dotyczy pól wyboru.

W 1.4.4 pojawia się błąd: $ („# opcja selectBox”) [3] .attr nie jest funkcją

To działa: $('#name option:eq(idx)').attr('selected', true);

Gdzie #namejest select id i idxwartość opcji, którą chcesz wybrać.

Atrybut selectedIndex czystego javascript jest właściwą drogą, ponieważ jest to czysty javascript i działa w różnych przeglądarkach:

$('#selectBox')[0].selectedIndex=4;

Oto demo jsfiddle z dwoma listami rozwijanymi używającymi jednego do ustawienia drugiego:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Możesz to również wywołać przed zmianą selectedIndex, jeśli chcesz atrybutu „selected” na tagu opcji ( tutaj jest skrzypce ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Często używam wyzwalacza („zmiany”), aby działał

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Przykład z id select = selectA1 i position_index = 0 (pierwsza opcja w select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

$('#selectBox option').get(3).attr('selected', 'selected')

Korzystając z powyższego, ciągle pojawiały się błędy w zestawie internetowym (Chrome), mówiąc:

„Błąd typu Uncaught TypeError: Object # nie ma metody„ attr ””

Ta składnia zatrzymuje te błędy.

$($('#selectBox  option').get(3)).attr('selected', 'selected');

Wybierz element na podstawie wartości z listy wyboru (szczególnie jeśli wartości opcji zawierają spację lub dziwny znak), wykonując następujące czynności:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

Ponadto, jeśli masz listę rozwijaną (w przeciwieństwie do wielokrotnego wyboru), możesz chcieć to zrobić, break;aby nie zastąpić znalezionej pierwszej wartości.

Potrzebuję rozwiązania, które nie ma na stałe wartości w pliku js; za pomocą selectedIndex. Większość podanych rozwiązań zawiodła jedną przeglądarkę. Wygląda na to, że działa w FF10 i IE8 (czy ktoś może przetestować w innych wersjach)

$("#selectBox").get(0).selectedIndex = 1; 

Jeśli chcesz wybrać element na podstawie konkretnej właściwości elementu, opcja jQuery typu [prop = val] otrzyma ten element. Teraz nie dbam o indeks, po prostu chciałem element według jego wartości.

$('#mySelect options[value=3]).attr('selected', 'selected');

Napotkałem ten sam problem. Najpierw musisz przejrzeć wydarzenia (tzn. Które wydarzenie nastąpi jako pierwsze).

Na przykład:

Pierwsze wydarzenie jest generowanie wybierz okno z opcjami.

Drugie wydarzenie jest wybranie opcji domyślnej, używając dowolnej funkcji, takich jak val () etc.

Powinieneś upewnić się, że Drugie wydarzenie powinno nastąpić po Pierwszym wydarzeniu .

Aby to osiągnąć, weźmy dwie funkcje, powiedzmy wygenerujSelectbox () (do genracji zaznaczenia) i selectDefaultOption ()

Musisz upewnić się, że selectDefaultOption () powinien być wywoływany dopiero po wykonaniu funkcji generateSelectbox ()

Możesz także zainicjować wiele wartości, jeśli pole wyboru jest wielokrotnością:

$('#selectBox').val(['A', 'B', 'C']);

możesz ustawić wartość zmiennej selectoption dynamicznie, a opcja zostanie wybrana. Możesz spróbować wykonać następujący kod

kod:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

KOD HTML:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

Wkrótce:

$("#selectBox").attr("selectedIndex",index)

gdzie indeks jest wybranym indeksem jako liczba całkowita.