jquery - primer - seleccionar un option de un select javascript

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

Question

Tengo un campo de select con algunas opciones en él. Ahora necesito seleccionar una de esas options con jQuery. Pero, ¿cómo puedo hacer eso cuando solo conozco el value de la option que 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/

Answer 1

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

Answer 2

Creo que la forma más sencilla es seleccionar val (), pero puede verificar lo siguiente. Consulte ¿Cómo manejar la selección y la etiqueta de 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);
    }
});

Answer 3

Deselecciona todo primero y filtra las opciones seleccionables:

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

Answer 4

Es antiguo, 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;
    };

Usted simplemente puede hacer algo como esto:

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

La razón por la que se usa esto es porque cambias el satemant seleccionado en DOM, lo que es compatible con el cursor cruzado y también activará el cambio para que puedas atraparlo.

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

Answer 5

Es mejor usar change() después de configurar el valor seleccionado.

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

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

JS Fiddle

Answer 6

Esto funciona seguro para Select Control :

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

Answer 7

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

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

Echa un vistazo a este método jQuery .

Answer 8

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 .

Answer 9

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

Bien, entonces algunas reglas básicas: si estuvieras haciendo esto en JavaScript directo, harías 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, quieres usar la función .prop () para establecer una propiedad, así que lo harías así:

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

De todos modos, solo asegúrate de que tu identificación sea única. De lo contrario, se golpeará la cabeza contra la pared preguntándose por qué esto no funcionó.

Answer 10

Para mí lo siguiente hizo el trabajo.

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

Answer 11

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

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

Answer 12

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

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>

Selección:

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

Ahora su opción 4 será seleccionada. Puede hacer esto, para seleccionar los valores en 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 cualquier Evento para seleccionar la opción

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

Answer 13

Puede seleccionar cualquier atributo y su valor utilizando el selector de atributo [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);

Donde value es el valor que desea seleccionar por.

Si necesita eliminar cualquier valor seleccionado previamente, como sería el caso si se usara varias veces, tendría que 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);

Answer 14

Solo pon este código:

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

Answer 15

Utilice el evento change() después de seleccionar el valor. De la documentación:

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

Answer 16

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

Answer 17

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 la he tomado de mi trabajo ...

Answer 18

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

Esto funciona bien donde #graphtype es el id de la etiqueta seleccionada.

etiqueta de selección de ejemplo:

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

Answer 19

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

Configuración de estado pendiente por valor

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

Answer 20

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

Answer 21

• Debe tener en cuenta el valor que desea cambiar dinámicamente, debe ser el mismo que el presente en las opciones que define en su HTML, ya que es 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