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

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/

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

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

Sprawdź tę metodę jQuery .

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

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

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

Odznacz wszystko najpierw i odfiltruj opcje do wyboru:

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

Ustawienie na status w toku według wartości

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

Dla mnie praca była następująca

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

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

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

Najlepszy sposób jest taki:

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

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

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.

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 .

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

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

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

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

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

Działa to na pewno w przypadku Select Control :

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

Wystarczy wpisać ten kod:

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

Link źródłowy

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>

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

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.

• 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

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.

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

mi to pasuje

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

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