Establecer la opción de selección ‘seleccionado’, por valor

Tengo un campo 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 debe seleccionarse?

Tengo el siguiente HTML:

 
Val 1 Val 2 Val 3

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

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

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

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

Mira el método jQuery .

Para seleccionar una opción con el valor ‘val2’:

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

Use el evento change() 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 desencadena. Para activar 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) 
  

Configuración en estado pendiente por valor

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

Para mí, el siguiente hizo el trabajo

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

Creo que la forma más fácil es seleccionar 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 las opciones.

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

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

Donde value es el valor que desea seleccionar.

Si necesita eliminar los valores seleccionados previamente, como sería el caso si esto se usa 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); 

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

HTML

  

jQuery

 $('select[name="dept"]').val('3'); 

Salida: Esto activará ENT .

una respuesta simple es, en html

  

en jquery, llamar a continuación función por botón o lo que sea

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

es simple y 100% funciona, porque está tomado de mi trabajo … 🙂 espero que sea de ayuda …

Es mejor usar change() luego 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 usuario, la explicación se incluye en JS Fiddle :

JS Fiddle

Utilizar:

 $("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)); } 
 var opt = new Option(name, id); $("#selectboxName").append(opt); opt.setAttribute("selected","selected"); 

.attr () a veces no funciona en las versiones antiguas de jQuery, pero puede usar .prop () :

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

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

   

Esto funciona con seguridad para Select Control :

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

De acuerdo, me doy cuenta de que esta publicación es antigua, pero algunas de las respuestas son peores que malas. Scary incluso. Y me resisto a la tentación de no contestar esto en piratas, hablo por desprecio a algunos de los otros carteles en este hilo.

No hay razón para pensar demasiado con hallazgos y selecciones interminables. Esto es realmente fácil. Todo lo que estás haciendo es acceder y establecer una propiedad. Eso es.

Bien, entonces algo de dom básico: si estuvieras haciendo esto en Javascript directo, harías esto:

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

Pero no lo haces con Javascript directo, lo estás haciendo con Jquery. Y en Jquery, que Dios lo bendiga, quiere usar la función .prop () para establecer una propiedad. Supongo que eso tiene sentido. Entonces, lo harías así.

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

¿Ver? ¿Fue realmente tan difícil?

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

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

SelectComponent:

  

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 crea una función simple pon la línea en ella y llama a la función en anyEvent para seleccionar la opción

Una mezcla de jQuery + javaScript hace la magia …

Solo ingrese este código:

 $("#Controls_ID").val(value); 
  • 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

Es una publicación antigua 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 cambias el estado de satemant seleccionado en DOM, lo que es compatible con crossbrowser y también activará el cambio para que puedas atraparlo.

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