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

Tengo un selectcampo con algunas opciones. Ahora necesito seleccionar uno de esos optionscon jQuery. Pero, ¿cómo puedo hacer eso cuando sólo conocer la valuede la optionque se debe seleccionar?

Tengo el siguiente 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>

Necesito seleccionar la opción con valor val2. ¿Cómo se puede hacer esto?

Aquí hay una página de demostración: http://jsfiddle.net/9Stxb/

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

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

Echa un vistazo a este método jQuery .

Para seleccionar una opción con el 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 desencadenar el evento manualmente, aplique .change()sin argumentos:

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

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

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

Establecer 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. Consulte ¿Cómo manejar la etiqueta de selección y opción en jQuery? para más detalles sobre 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);
    }
});

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 valueestá el valor que desea seleccionar?

Si necesita eliminar cualquier valor seleccionado anteriormente, como sería el caso si se usa varias veces, necesitaría 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);

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

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

De acuerdo, entonces algunos dom básicos: si estuvieras haciendo esto en JavaScript directo, lo harías:

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 utilizar 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, se golpeará la cabeza contra la pared preguntándose 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á al cambio de selección por usuario, la explicación se incluye en JS Fiddle :

JS Fiddle

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

Esto funciona bien donde #graphtypeestá la identificación de la etiqueta select.

ejemplo seleccione etiqueta:

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

Utilizar:

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

Esto funciona para mi. 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 .prop () :

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

Esto funciona con seguridad para Select Control :

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

Solo pon este código:

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

Enlace fuente

Utilice el método val () jQuery para la selección de valores únicos y múltiples en 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>

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 su opción 4 será seleccionada. Puede hacer esto para seleccionar los valores al inicio de forma predeterminada.

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

o cree una función simple, coloque la línea y llame a la función en cualquier evento 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 puede hacer algo como esto:

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

Reson por qué usar esto es porque cambias el tiempo seleccionado seleccionado a DOM, lo que es compatible con crossbrowser y también activará el cambio para que puedas atraparlo.

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

• Debe tener en cuenta que el valor que desea cambiar dinámicamente, debe ser el mismo que uno presente en las opciones que define en su HTML tal como está case sensative. Puede cambiar su cuadro de selección dinámicamente de la siguiente manera,

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

Parece haber un problema con los controles desplegables de selección 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');

Al igual que 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 se reflejó en la etiqueta superior del control.

Espero que esto ayude.

Un problema que encontré cuando el valor es una ID y el texto es un código. No puede establecer el valor utilizando 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

esto funciona para mi

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

Esto funciona bien

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