Set select option 'selected', by value

Aby wybrać opcję o wartości 'val2':

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

Użyj zdarzenia change() Po wybraniu wartości. Z docs:

Jeśli pole straci ostrość bez zmiany zawartości, zdarzenie nie zostanie wywołane. Aby wywołać zdarzenie ręcznie, Zastosuj .change() bez argumentów:

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

Więcej informacji na stronie .Zmień().

Usuń zaznaczenie wszystkich i filtruj wybrane opcje:

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

<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>

Ustawianie statusu oczekującego według wartości

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

Dla mnie wykonało to zadanie

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

Myślę, że najprostszym sposobem jest wybranie ustawienia val (), ale możesz sprawdzić poniżej. Zobacz też Jak obsługiwać znacznik select I option w jQuery? aby uzyskać więcej informacji 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);
    }
});

Najlepszy sposób jest taki:

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

Prosta odpowiedź to, at 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>

W jquery, wywołanie poniżej funkcji przez przycisk lub cokolwiek

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

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 value jest wartością, którą chcesz wybrać.

Jeśli chcesz usunąć wybrane wcześniej wartości, tak jak w przypadku wielokrotnego użycia, musisz je nieznacznie zmienić, aby najpierw usunąć wybrany atrybut

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

Nie ma powodu, aby to przemyśleć, jedyne co robisz, to uzyskiwanie dostępu i ustawianie właściwości. To wszystko.

Ok, więc jakiś podstawowy dom: Jeśli robisz to w prostym JavaScript, to tak:

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

Ale nie robisz tego z prostym JavaScript, robisz to z jQuery. I w jQuery, chcesz użyć .funkcja prop (), aby ustawić właściwość, więc zrobisz to tak:

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

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

Najprostszym sposobem na to jest:

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: spowoduje aktywację ENT.

Lepiej użyć change() Po ustawieniu wartości select.

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

W ten sposób Kod zakończy się zmianą select by user, Wyjaśnienie zawarte jest w JS Fiddle :

Js Fiddle

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

Działa to dobrze tam, gdzie #graphtype jest identyfikatorem znacznika select.

Przykładowy znacznik select:

 <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>

Można to osiągnąć różnymi metodami:
(pamiętaj, jeśli element ma być operowany, lepiej nadaj mu id lub klasę, zamiast mieć element nadrzędny id lub klasę).
Proszę., Ponieważ div ma klasę kierującą select wewnątrz niego, kod będzie brzmiał:

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

Lub

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

Jeśli Klasa zostałaby podana do wyboru, kod będzie:

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

Lub

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

Lub

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

Aby przekazać wartość dynamicznie, kod będzie be:
valu= "val2";

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

Jeśli element jest dodawany przez ajax, Musisz podać 'id' swojemu elementowi i użyć
okno.dokument.getElementById else Musisz dać 'class' swojemu elementowi i użyć
okno.dokument.getElementById

Można również wybrać wartość elementu select według jego numeru indeksu.
Jeśli nadałeś ID swojemu elementowi select, kod będzie brzmiał:

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

Pamiętaj, gdy zmienisz wartość select, jak wspomniano powyżej, Zmień metodę nie jest dzwoniłem.
tzn. jeśli napisałeś kod do zrobienia pewnych rzeczy na zmianę select powyższe metody zmienią wartość select, ale nie wywoła zmiany.
aby uruchomić funkcję zmiany, musisz dodać .change() na końcu. więc kod będzie:

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

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

Użycie:

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

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

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

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

Źródło Link

Użyj metody val () jQuery dla Single oraz wartość wielokrotna wybór w rozwijanym menu

    $(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>

Wpisz ten kod:

$("#Controls_ID").val(value);

To działa na pewno dla Select Control :

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

It works for me

$("#id_100").val("val2");

Spróbuj tego. Prosty, ale skuteczny javaScript + jQuery zabójcze combo.

SelectComponent:

<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 na początku.

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

Lub utworzyć prostą funkcję umieść linię w niej i wywołaj funkcję na anyEvent, aby wybrać opcję

Mieszanka jquery + javaScript robi magię....

To 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 proste można zrobić coś takiego:

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

Reson dlaczego używać to ponieważ ty zmieniać selected satemant do DOM co jest crossbrowser obsługiwany i także wyzwalać zmiana ty móc ono.

Jest podstawową symulacją Ludzkiego działania.

• Należy pamiętać, że wartość, którą chcemy zmieniać dynamicznie, musi być taka sama jak ta obecna w opcjach zdefiniowanych w HTML, jak to jest case sensative. Możesz zmienić swoje pole wyboru dynamicznie 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

Wydaje się, że wystąpił problem z dynamiczną zmianą formantów select rozwijanych, gdy formanty są dynamicznie tworzone zamiast znajdować się na statycznej stronie HTML.

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

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

Tak jak dodatek pierwsza linijka kodu bez drugiej linijki, faktycznie działała przejrzyście w tym, że pobranie wybranego indeksu było poprawne po ustawieniu indeksu i jeśli faktycznie kliknąłeś kontrolkę, wyświetli się poprawny element, ale to nie odzwierciedlał w górnej etykiecie kontrolki.

Problem, na który natknąłem się, gdy wartość to ID, a tekst To kod. 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

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