Establecer la opción de selección 'seleccionado', por valor

Hay una manera más fácil que no requiere que vayas a la etiqueta de opciones:

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

mira esto método jQuery.

NOTA: El código anterior no desencadena el evento de cambio. Debe llamarlo así para una compatibilidad total:

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

Para seleccionar una opción con valor 'val2':

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

Use el change() evento después de seleccionar el valor. De los documentos:

Si el campo pierde el foco sin que el contenido haya cambiado, el evento no se activa. Para activar el evento manualmente, aplique .change() sin argumentos:

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

Más información está en .cambio().

Anule la selección de todo primero y filtre las opciones seleccionables:

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

Establecimiento en estado pendiente por valor

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

Para mí lo siguiente hizo el trabajo

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

Creo que la forma más fácil es seleccionar establecer val(), pero puede verificar lo siguiente. Ver ¿Cómo manejar la etiqueta de selección y opción en jQuery? para más detalles sobre las opciones.

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

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

No está optimizado, pero la siguiente lógica también es útil en algunos casos.

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

La mejor manera es así:

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

una respuesta simple es, en 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>

en jquery, llame a la siguiente función con un botón o lo que sea

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

es simple y funciona al 100%, porque está tomado de mi trabajo... :) espero que sea de ayuda...

Puedes lograr esto con diferentes métodos:
(recuerde que si se va a operar un elemento, es mejor darle una identificación o clase, en lugar de tener su elemento principal como identificación o clase).
Aquí, como el div tiene una clase para apuntar a la selección dentro de él, el código será:

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

or

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

Si la clase se hubiera dado para seleccionarse a sí misma, el código sería:

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

or

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

or

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

Para pasar el valor dinámicamente, el código será:
valor="valor2";

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

Si el elemento se agrega a través de ajax, tendrá que dar 'id' a su elemento y usar
window.document.getElementById else Tendrá que dar 'clase' a su elemento y usar
ventana.documento.getElementById

También puede seleccionar el valor del elemento seleccionado por su número de índice.
Si le ha dado una identificación a su elemento seleccionado, el código será:

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

Recuerde que cuando cambia el valor de selección como se dijo anteriormente, no se llama al método de cambio.
es decir, si ha escrito código para hacer algunas cosas en el cambio de selección, los métodos anteriores cambiarán el valor de selección pero no activarán el cambio.
para activar la función de cambio, debe agregar .change() al final. entonces el codigo sera:

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

Puede seleccionar cualquier atributo y su valor utilizando el selector de atributos [attributename=optionalvalue], por lo que en su caso puede seleccionar la opción y establecer el atributo seleccionado.

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

Dónde value es el valor por el que desea seleccionar.

Si necesita eliminar cualquier valor seleccionado anteriormente, como sería el caso si se usa varias veces, deberá cambiarlo ligeramente para eliminar primero el atributo seleccionado

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

No hay razón para pensar demasiado en esto, todo lo que está haciendo es acceder y configurar una propiedad. Eso es todo.

Bien, entonces un poco de dom básico: Si estuviera haciendo esto en JavaScript directo, sería esto:

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

Pero no lo estás haciendo con JavaScript directo, lo estás haciendo con jQuery. Y en jQuery, desea usar la función .prop() para establecer una propiedad, por lo que lo haría así:

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

De todos modos, solo asegúrese de que su identificación sea única. De lo contrario, te estarás golpeando la cabeza contra la pared preguntándote por qué esto no funcionó.

La forma más fácil de hacerlo es:

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

Salida: Esto activará ENT.

Es mejor usar change() después de configurar el valor de selección.

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

Al hacer esto, el código se cerrará para cambiar la selección por el usuario, la explicación se incluye en JS violín:

JS violín

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

Esto funciona bien donde #graphtype es el id de la etiqueta de selección.

ejemplo de etiqueta de selección:

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

Esto funciona para mí. Estoy usando este código para analizar un valor en un formulario de actualización de fancybox, y mi fuente completa de app.js es:

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

Y mi código PHP es:

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 veces no funciona en versiones anteriores de jQuery, pero puede usar .apuntalar():

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

esto funciona para mi

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

Esto funciona seguro para Seleccionar control:

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

Prueba esto. Simple pero efectivo javaScript + jQuery el combo letal.

Seleccionar componente:

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

Selección:

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

Ahora se seleccionará su opción 4. Puede hacer esto para seleccionar los valores de inicio de forma predeterminada.

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

o cree una función simple, coloque la línea en ella y llame a la función en anyEvent para seleccionar la opción

Una mezcla de jQuery + javaScript hace la magia....

Es una publicación anterior, pero aquí hay una función simple que actúa como el complemento 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;
    };

Simplemente puedes hacer algo como esto:

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

Reson, por qué usar esto es porque cambia el satemant seleccionado a DOM, lo que es compatible con el navegador cruzado y también activará el cambio para que pueda capturarlo.

Es básicamente simulación de acción humana.

Aquí hay muchas soluciones para cambiar el valor seleccionado, pero ninguna funcionó para mí, ya que mi desafío era ligeramente diferente al OP. Necesito filtrar otro menú desplegable de selección en función de este valor.

La mayoría de la gente usaba $("div.id_100").val("val2").change(); para que funcione para ellos. Tuve que modificar esto ligeramente para $("div#idOfDiv select").val("val2").trigger("change").

Esto tampoco fue suficiente, también tuve que asegurarme de esperar a que se cargara el documento. Mi código completo se ve así:

$(document).ready(function() {
    $("div#idOfDiv select").val("val2").trigger("change");
});

¡Espero que esto ayude a alguien con el mismo desafío que tuve!

Parece haber un problema con los controles desplegables seleccionados que no cambian dinámicamente cuando los controles se crean dinámicamente en lugar de estar en una página HTML estática.

En jQuery esta solución funcionó para mí.

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

Solo como un apéndice, la primera línea de código sin la segunda línea, en realidad funcionó de manera transparente en eso, recuperar el índice seleccionado fue correcto después de configurar el índice y si realmente hizo clic en el control, mostraría el elemento correcto pero esto no reflejado en la etiqueta superior del control.

Espero que esto ayude.

Un problema que encontré cuando el valor es una identificación y el texto es un código. No puede establecer el valor usando el código, pero no tiene acceso directo a la ID.

var value;

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

//Do work here

Necesitaba seleccionar una opción pero era posible que dos opciones tuvieran el mismo valor.
Esto fue puramente por diferencia visual (front-end).
Puede seleccionar una opción (incluso si 2 tienen el mismo valor) así:

let options = $('#id_100 option')
options.prop('selected', false)   // Deselect all currently selected ones
let option = $(options[0])        // Select option from the list
option.prop('selected', true)
option.parent().change()          // Find the <select> element and call the change() event.

Esto anula la selección de todos los seleccionados actualmente <option> elementos. Selecciona el primero (usando options[0]) y actualiza el <select> elemento usando el change evento.

Gracias a la respuesta de Silly: https://stackoverflow.com/a/13343616/6513302.

En mi caso, necesitaba usar una combinación de

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

$('.id_100').val("val1").change(); //I need to set the same value here for my next form submit.

para establecer el valor correcto para mi próximo envío de formulario. Cuando uso esto, incluso tengo otro evento de cambio acotado, no está dando un ciclo infinito.