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/

w00
źródło
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 .

pinghsien422
źródło
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');
Kirill Ivlev
źródło
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 () .

jitendrapurohit
źródło
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)
głupi
źródło
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");
Deweloper
źródło
36

Dla mnie praca była następująca

$("div.id_100").val("val2").change();
Taran
źródło
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);
    }
});
Dipu
źródło
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);
Rune FS
źródło
15

Najlepszy sposób jest taki:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
Daniel Carpio Contreras
źródło
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 ..

Mang Jojot
źródło
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.

Icchak
źródł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 .

Pran
źródło
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

Nick Tsai
źródło
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>
LOKENDRA
źródło
8
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
Ravi Wadje
źródło
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));
}
Adityo
źródło
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;
    }
});
Shujaath Khan
źródło
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;
} });
Shujaath Khan
źródło
4

Wystarczy wpisać ten kod:

$("#Controls_ID").val(value);
Osama khodrog
źródło
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>
Code Spy
źródło
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ę ....

Majid Ali Khan
źródło
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.

Ivijan Stefan Stipić
źródło
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

Shahrukh Anwar
źródło
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.

użytkownik2288580
źródło
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
Ryan
źródło
0

mi to pasuje

$("#id_100").val("val2");
użytkownik9972736
źródło
-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
    });
Mohammed Muzammil
źródło