Impostare l'opzione di selezione 'selezionata', in base al valore

Ho un selectcampo con alcune opzioni. Ora devo selezionare uno di quelli optionscon jQuery. Ma come posso farlo quando conosco solo valuequello optionche deve essere selezionato?

Ho il seguente 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>

Devo selezionare l'opzione con valore val2. Come si può fare?

Ecco una pagina demo: http://jsfiddle.net/9Stxb/

C'è un modo più semplice che non richiede di andare nel tag delle opzioni:

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

Dai un'occhiata a questo metodo jQuery .

Per selezionare un'opzione con valore 'val2':

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

Utilizzare l' change()evento dopo aver selezionato il valore. Dai documenti:

Se il campo perde lo stato attivo senza che il contenuto sia cambiato, l'evento non viene attivato. Per attivare manualmente l'evento, applicare .change()senza argomenti:

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

Maggiori informazioni sono disponibili su .change () .

Deseleziona tutto per primo e filtra le opzioni selezionabili:

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

Impostazione su Stato in sospeso per valore

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

Per me il seguente ha fatto il lavoro

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

Penso che il modo più semplice sia selezionare per impostare val (), ma è possibile verificare quanto segue. Vedi Come gestire il tag select e option in jQuery? per maggiori dettagli sulle opzioni.

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

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

Non ottimizzato, ma in alcuni casi è utile anche la seguente logica.

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

Puoi selezionare qualsiasi attributo e il suo valore usando il selettore di attributi [attributename=optionalvalue], quindi nel tuo caso puoi selezionare l'opzione e impostare l'attributo selezionato.

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

Dov'è valueil valore che si desidera selezionare.

Se è necessario rimuovere qualsiasi valore selezionato in precedenza, come nel caso in cui venga utilizzato più volte, è necessario modificarlo leggermente in modo da rimuovere prima l'attributo selezionato

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

Il modo migliore è così:

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

una semplice risposta è, in 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>

su jquery, chiama sotto la funzione con il pulsante o qualsiasi altra cosa

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

è semplice e funziona al 100%, perché è tratto dal mio lavoro ... :) spero che sia di aiuto ..

Non c'è motivo di pensarci troppo, tutto ciò che stai facendo è accedere e impostare una proprietà. Questo è tutto.

Va bene, quindi alcuni dom di base: se lo facessi in JavaScript, lo faresti:

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

Ma non lo stai facendo con JavaScript diretto, lo stai facendo con jQuery. E in jQuery, vuoi usare la funzione .prop () per impostare una proprietà, quindi lo faresti in questo modo:

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

Ad ogni modo, assicurati solo che il tuo ID sia unico. Altrimenti, sbatterai la testa sul muro chiedendoti perché non ha funzionato.

Il modo più semplice per farlo è:

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

Uscita: questo attiverà ENT .

È meglio usare change()dopo aver impostato il valore di selezione.

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

In questo modo, il codice si avvicinerà alla modifica della selezione da parte dell'utente, la spiegazione è inclusa in JS Fiddle :

JS Fiddle

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

Funziona bene dove si #graphtypetrova l'id del tag select.

esempio seleziona 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");

Uso:

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

Questo funziona per me. Sto usando questo codice per analizzare un valore in un modulo di aggiornamento fancybox e la mia fonte completa da app.js è:

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

E il mio codice PHP è:

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 () a volte non funziona nelle versioni precedenti di jQuery, ma puoi usare .prop () :

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

Questo funziona sicuramente con Select Control :

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

Inserisci questo codice:

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

Link alla fonte

Utilizzare il metodo val () jQuery per la selezione di valori singoli e multipli in 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>

Prova questo. JavaScript + jQuery semplice ma efficace la combinazione letale.

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>

Selezione:

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

Ora la tua opzione 4 sarà selezionata. Puoi farlo, per selezionare i valori all'avvio per impostazione predefinita.

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

oppure crea una semplice funzione inserisci la linea e chiama la funzione su anyEvent per selezionare l'opzione

Una miscela di jQuery + javaScript fa la magia ....

È vecchio post ma qui è una semplice funzione che si comportano come plugin 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;
    };

Semplicemente puoi fare qualcosa del genere:

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

Risolvere il motivo per cui utilizzare questo è perché si modifica satemant selezionato in DOM ciò che è supportato crossbrowser e inoltre attiverà il cambiamento per poterlo catturare.

È fondamentalmente la simulazione dell'azione umana.

• È necessario tenere presente che il valore che si desidera modificare in modo dinamico, deve essere uguale a quello presente nelle opzioni definite nell'HTML così come sono case sensative. Puoi modificare la casella di selezione in modo dinamico come segue,

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

Sembra che ci sia un problema con i controlli a discesa selezionati che non cambiano in modo dinamico quando i controlli vengono creati in modo dinamico invece di trovarsi in una pagina HTML statica.

In jQuery questa soluzione ha funzionato per me.

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

Proprio come un addendum la prima riga di codice senza la seconda riga, in realtà ha funzionato in modo trasparente in questo, il recupero dell'indice selezionato era corretto dopo aver impostato l'indice e se si fa effettivamente clic sul controllo mostrerebbe l'elemento corretto ma questo non riflette nell'etichetta superiore del controllo.

Spero che sia di aiuto.

Un problema che ho riscontrato quando il valore è un ID e il testo è un codice. Non è possibile impostare il valore utilizzando il codice ma non si ha accesso diretto all'ID.

var value;

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

//Do work here

per me funziona

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

Funziona bene

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