Ustaw opcję wyboru „wybrano” według wartości


951

Mam selectpole z kilkoma opcjami. Teraz muszę wybrać jeden z tych optionsz jQuery. Ale jak mogę to zrobić, skoro znam tylko valuete, optionktóre należy wybrać?

Mam następujący kod HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Muszę wybrać opcję z wartością val2. Jak można to zrobić?

Oto strona demonstracyjna: http://jsfiddle.net/9Stxb/


Do pojedynczej wartości rozwijanej użyj .val ('5') do wielokrotnego wyboru użyj val (['5', '4', '8']) pełna wersja demo freakyjolly.com/…
Code Spy

Odpowiedzi:


1533

Jest łatwiejszy sposób, który nie wymaga przejścia do tagu opcji:

$("div.id_100 select").val("val2");

Sprawdź tę metodę jQuery .


18
Może to powodować błędy w FF (przynajmniej) występujące w pustym polu wyboru
Jonathan

21
plakat pytania zaczyna się od: „Mam pole wyboru z kilkoma opcjami…”, więc nie jest puste, dlatego rozwiązanie pozostaje prawidłowe.
pinghsien422,

8
@JamesCazzetta wysłać tablicę do Val: .val(["Multiple2", "Multiple3"]). api.jquery.com/val/#val-value
scipilot

133
Musiałem ręcznie wywołać, .val(x).change();aby uruchomić zdarzenie onChange select, wygląda na to, że ustawienie val () go nie uruchamia.
scipilot

16
Uważaj: val () może ustawiać wartości, które nie istnieją w opcjach.
Daniel

429

Aby wybrać opcję o wartości „val2”:

$('.id_100 option[value=val2]').attr('selected','selected');

5
Jest to najlepsze rozwiązanie, jeśli żądana wartość może, ale nie musi być opcją, a nie chcesz wprowadzać zmian, jeśli nie jest to opcja. Jeśli użyjesz .val()zaznaczenia i spróbujesz wybrać wartość, której nie ma, usunie zaznaczenie wszystkiego.
Wally Altman,

Zgadzam się - jest to najbardziej elegancka opcja - jasne i na temat. Nie jestem pewien, czy „prop” działa lepiej we wszystkich przypadkach (przeglądarkach). Ale to z pewnością ułatwia wyszukiwanie.
Lee Fuller

4
Użyłem $("select[name=foo] option[value=bar]).attr('selected','selected');również, który działał dobrze dla wszystkich testowanych przeglądarek.
Lee Fuller

1
Podoba mi się ta odpowiedź bardziej niż odpowiedź zaakceptowana, ponieważ: element.outerHTML zostaje zaktualizowany o to, a nie o zaakceptowaną odpowiedź.
HoldOffHunger

2
Warto zauważyć, że to nie zadziała, jeśli rozwijane menu wyboru zostało ukryte, więc w moim przypadku korzystam z wtyczki select boxit, ale próbuję wywołać zmianę pola wyboru, aby oryginalny kod z modułem obsługi wymiany został uruchomiony. Wystarczy zaktualizować kod dla nowego elementu, którym jest element selectboxit
Chris C

331

Użyj change()zdarzenia po wybraniu wartości. Z dokumentów:

Jeśli pole traci fokus bez zmiany zawartości, zdarzenie nie jest wyzwalane. Aby ręcznie uruchomić zdarzenie, zastosuj .change()bez argumentów:

$("#select_id").val("val2").change();

Więcej informacji znajduje się w .change () .


22
To zasługuje na znacznie więcej głosów poparcia i należy do ścisłej czołówki. Jego właściwa droga, nie bawiąc się prop, attritd. I progagates wszystkie zdarzenia prawidłowo.
Polygnome,

1
Tak, poprawnie propaguje wszystkie zdarzenia. W moich testach „attr” zadziałało za pierwszym razem, a potem wszystko pozostało „wybrane”. Użyłem „prop”, który zmienił wszystko poprawnie, ale nie propagowałem wydarzeń takich jak (pokaż / ukryj) inne pola. Ta odpowiedź działała we wszystkich przypadkach i należy ją uznać za poprawną.
iLLin

1
Jeśli masz już przypisanego do nas detektora, spowoduje to nieskończoną pętlę.
qwertzman

1
Przez chwilę próbowałem zmusić moją głupią listę rozwijaną do zmiany, to rozwiązanie było jedyne, które zadziałało! Dzięki stary!
AxleWack,

1
Dzięki. Dużo szukałem, zanim znalazłem tę sugestię, i to była jedyna rzecz, która zadziałała. Nie jestem pewien, dlaczego nie jest na szczycie.
Rob Santoro

57

Odznacz wszystko najpierw i odfiltruj opcje do wyboru:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

2
Wartością wybranego atrybutu może być pusty ciąg znaków lub selected. Miałeś na myśli .prop()?
rink.attendant. 6

2
Dobra odpowiedź. Zaakceptowana odpowiedź kończy się pustym wyborem, gdy wartość nie istnieje w opcjach.
Rauli Rajande

5
NA GÓRĘ, najlepszy tutaj. Do przyszłego użytku myślę, że powinniśmy użyć prop zamiast attr.
Daniel

Bardzo podoba mi się to rozwiązanie. Zastanawiam się jednak, czy byłoby lepiej, pod względem wydajności, gdyby selektor został zmieniony na „.id_100> opcja”
Hill

43
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Ustawienie na status w toku według wartości

   $('#contribution_status_id').val("2");

36

Dla mnie praca była następująca

$("div.id_100").val("val2").change();

27

Myślę, że najłatwiej jest wybrać ustawienie val (), ale możesz sprawdzić następujące. Zobacz Jak obsługiwać znacznik wyboru i opcji w jQuery? po więcej szczegółów na temat opcji.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

Nie zoptymalizowany, ale w niektórych przypadkach przydatna jest również następująca logika.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Wolę tę metodę niż bezpośrednie ustawienie val (). Lubię też ustawiać ten atrybut - pomaga w debugowaniu. $ (this) .attr („selected”, „selected”)
Craig Jacobs

17

Możesz wybrać dowolny atrybut i jego wartość za pomocą selektora atrybutów [attributename=optionalvalue], więc w twoim przypadku możesz wybrać opcję i ustawić wybrany atrybut.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

Gdzie valuejest wartość, którą chcesz wybrać.

Jeśli musisz usunąć dowolne wcześniej wybrane wartości, tak jak w przypadku wielokrotnego użycia tej wartości, musisz ją nieco zmienić, aby najpierw usunąć wybrany atrybut

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

15

Najlepszy sposób jest taki:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

W Chrome ustawienie $('<select>').val('asdf')nie zaktualizowało zaznaczenia, aby pokazać aktualnie wybraną opcję. Ta odpowiedź rozwiązała ten problem.
Joshua Burns

Chociaż to też zadziała, ale $ ('<select>') .val ('asdf') działa dobrze w chrome 79.0.3945.88
QMaster

14

prosta odpowiedź brzmi: html

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

na jquery, wywołaj funkcję poniżej za pomocą przycisku lub cokolwiek innego

$('#idUkuran').val(11).change();

to proste i działa w 100%, bo pochodzi z mojej pracy ... :) mam nadzieję, że pomoże ..


Twoja domyślna wartość to 1000? Dlaczego nie „”
voodoocode

2
jest opcjonalny, możesz go modyfikować według potrzeb .. :)
Mang Jojot,

14

Nie ma powodu, aby to przemyślać, wszystko, co robisz, to uzyskiwanie dostępu i ustawianie właściwości. Otóż ​​to.

Ok, więc podstawowa domena: Jeśli robiłeś to w prostym JavaScript, zrobiłbyś to:

window.document.getElementById('my_stuff').selectedIndex = 4;

Ale nie robisz tego z prostym JavaScriptem, robisz to z jQuery. A w jQuery chcesz użyć funkcji .prop (), aby ustawić właściwość, więc zrobiłbyś to tak:

$("#my_stuff").prop('selectedIndex', 4);

W każdym razie upewnij się, że Twój identyfikator jest unikalny. W przeciwnym razie będziesz walić głową w ścianę, zastanawiając się, dlaczego to nie zadziałało.


12

Najłatwiej to zrobić:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Wyjście: aktywuje ENT .


12

Lepiej używać change()po ustawieniu wartości wyboru.

$("div.id_100 select").val("val2").change();

W ten sposób kod będzie blisko zmiany wyboru przez użytkownika, objaśnienie znajduje się w JS Fiddle :

JS Fiddle


Dlaczego to? Czy mógłbyś coś wyjaśnić?
71GA

JS Fiddle . Dzięki metodzie change () kod kończy się na zmianie select przez użytkownika, podczas gdy do obsłużenia potrzebne są nasłuchiwania on-change.
Nick Tsai,

12

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

Działa to dobrze tam, gdzie #graphtypejest identyfikator znacznika select.

przykład wybierz tag:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

8
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

8

Posługiwać się:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

To działa dla mnie. Używam tego kodu do analizowania wartości w formularzu aktualizacji fancybox, a moje pełne źródło z app.js to:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

A mój kod PHP to:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

7

.attr () czasami nie działa w starszych wersjach jQuery, ale możesz użyć .prop () :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

4

Działa to na pewno w przypadku Select Control :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });


4

Link źródłowy wprowadź opis zdjęcia tutaj

Użyj metody jQuery val () do wyboru wartości pojedynczej i wielokrotnej w DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

3

Spróbuj tego. Prosty, ale skuteczny javaScript + jQuery śmiertelną kombinację.

Wybierz składnik:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Wybór:

document.getElementById("YourSelectComponentID").value = 4;

Teraz zostanie wybrana opcja 4. Możesz to zrobić, aby domyślnie wybrać wartości przy uruchomieniu.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

lub utwórz prostą funkcję, umieść w niej linię i wywołaj funkcję w dowolnym zdarzeniu, aby wybrać opcję

Mieszanka jQuery + javaScript robi magię ....


3

Jest stary post, ale tutaj jest jedna prosta funkcja, która działa jak wtyczka jQuery.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

Po prostu możesz zrobić coś takiego:

$('.id_100').selectOption('val2');

Rozumiem, dlaczego tego używasz, ponieważ zmieniłeś wybranego satemanta w DOM, co jest obsługiwane przez przeglądarkę, a także spowoduje zmianę, abyś mógł go złapać.

Jest w zasadzie symulacją działania człowieka.


2
  • Musisz wziąć pod uwagę wartość, którą chcesz dynamicznie zmieniać, musi być taka sama, jak obecna w opcjach, które definiujesz w swoim obecnym HTML case sensative. Możesz dynamicznie zmieniać pole wyboru w następujący sposób,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work


1

Wygląda na to, że występuje problem polegający na tym, że kontrolki rozwijane wyboru nie zmieniają się dynamicznie, gdy kontrolki są tworzone dynamicznie zamiast znajdować się na statycznej stronie HTML.

W jQuery to rozwiązanie działało dla mnie.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Podobnie jak dodatek do pierwszego wiersza kodu bez drugiego wiersza, działał w ten sposób transparentnie, odzyskiwanie wybranego indeksu było prawidłowe po ustawieniu indeksu i jeśli faktycznie kliknąłeś kontrolkę, pokazywałby prawidłowy element, ale to nie odzwierciedlało w górnej etykiecie kontrolki.

Mam nadzieję że to pomoże.


0

Problem, na który natrafiłem, gdy wartość jest identyfikatorem, a tekst jest kodem. Nie można ustawić wartości za pomocą kodu, ale nie masz bezpośredniego dostępu do identyfikatora.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here


-1

To działa dobrze

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.