Verifique si la opción está seleccionada con jQuery, si no, seleccione un valor predeterminado


Respuestas:


270

Si bien no estoy seguro de qué es exactamente lo que quieres lograr, este fragmento de código funcionó para mí.

<select id="mySelect" multiple="multiple">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length) {
    $("#mySelect option[value='3']").attr('selected', 'selected');
  }
});
</script>

86
La selección sería más fácil de leer así:$("#mySelect").val(3);
Jørn Schou-Rode

66
Esto me puso en el camino correcto, pero necesitaba hacer esto: $("#mySelect option")[2]['selected'] = true; descubrí eso después de investigar las estructuras de objetos en Firebug.
semperos

28
A partir de jQuery 1.6 puede establecer la propiedad directamente. $("#mySelect").prop("selectedIndex", 2)
gradbot

1
La versión .val (x) no funciona en Internet Explorer 8, por lo que @gradbot tiene razón, ya que funciona en todos los navegadores.
Sorcy

30

No es necesario usar jQuery para esto:

var foo = document.getElementById('yourSelect');
if (foo)
{
   if (foo.selectedIndex != null)
   {
       foo.selectedIndex = 0;
   } 
}

58
El OP declaró: "Usando jQuery ...", así que parece superfluo ignorar eso, ¿no?
BryanH el

13
Personalmente, si hago una pregunta específica, me gustaría obtener la respuesta para la pregunta en lugar de una forma diferente.
vitto

18
A veces la respuesta que busca no es la que espera.
MrBoJangles

55
De todos modos, solicitó jQuery, y la respuesta de jQuery es bastante más fácil de entender, especialmente si uno no comprende JavaScript base.
shmeeps

66
Excelente manera de hacerlo, ¡a veces JavaScript base puede ser bastante útil!
Hallaghan

13

Esta pregunta es antigua y tiene muchas opiniones, por lo que simplemente lanzaré algunas cosas que ayudarán a algunas personas, estoy seguro.

Para verificar si un elemento seleccionado tiene algún elemento seleccionado:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); }

o para verificar si una selección no tiene nada seleccionado:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); }

o si está en un bucle de algún tipo y desea verificar si el elemento actual está seleccionado:

$('#mySelect option').each(function() {
    if ($(this).is(':selected')) { .. }
});

para verificar si un elemento no está seleccionado mientras está en un bucle:

$('#mySelect option').each(function() {
    if ($(this).not(':selected')) { .. }
});

Estas son algunas de las formas de hacer esto. jQuery tiene muchas formas diferentes de lograr lo mismo, por lo que generalmente solo debe elegir cuál parece ser la más eficiente.


"no" no ha funcionado para mí $ ('# opción mySelect'). each (function () {if ($ (this) .not (': selected')) {..}}); Entonces, una negación utilizada es como si (! $ (This) .is (': selected')) {..} Navegador: Chrome; Versión Jquery: 3.1.1
Anil kumar

12

La respuesta de lencioni es lo que recomendaría. Puede cambiar el selector de la opción ('#mySelect option:last')para seleccionar la opción con un valor específico usando " #mySelect option[value='yourDefaultValue']". Más sobre selectores .

Si está trabajando extensamente con listas seleccionadas en el cliente, consulte este complemento: http://www.texotela.co.uk/code/jquery/select/ . Eche un vistazo a la fuente si desea ver más ejemplos de cómo trabajar con listas seleccionadas.


9

Aquí está mi función cambiando la opción seleccionada. Funciona para jQuery 1.3.2

function selectOption(select_id, option_val) {
    $('#'+select_id+' option:selected').removeAttr('selected');
    $('#'+select_id+' option[value='+option_val+']').attr('selected','selected');   
}

7
<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length)
   $("#mySelect").val( 3 );

});
</script>


3

Ya me encontré con el complemento de texotela mencionado, que me permitió resolverlo así:

$(document).ready(function(){
    if ( $("#context").selectedValues() == false) {
    $("#context").selectOptions("71");
    }
});


2

Este fue un script rápido que encontré que funcionó ... El resultado se asigna a una etiqueta.

$(".Result").html($("option:selected").text());

1

Ustedes están haciendo demasiado para seleccionar. Solo seleccione por valor:

$("#mySelect").val( 3 );

2
Esto está seleccionando la opción 3 independientemente de si ya está seleccionada otra opción.
Jordan Ryan Moore, el


1

Encontré una buena manera de verificar, si la opción está seleccionada y seleccionar una predeterminada cuando no lo está.

    if(!$('#some_select option[selected="selected"]').val()) {
        //here code if it HAS NOT selected value
        //for exaple adding the first value as "placeholder"
        $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>');
    }

Si #some_select no tiene la opción predeterminada seleccionada, entonces .val () no está definido


0
$("option[value*='2']").attr('selected', 'selected');
// 2 for example, add * for every option

0
$("#select_box_id").children()[1].selected

Esta es otra forma de verificar si una opción está seleccionada o no en jquery. Esto devolverá booleano (verdadero o falso).

[1] es el índice de la opción de cuadro de selección


0

Cambie el evento en el cuadro de selección para que se active y, una vez que lo haga, simplemente tire del atributo id de la opción seleccionada: -

$("#type").change(function(){
  var id = $(this).find("option:selected").attr("id");

  switch (id){
    case "trade_buy_max":
      // do something here
      break;
  }
});

0

Estaba buscando algo similar y encontré esto:

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true);

Esto encuentra todos los menús seleccionados en la clase que aún no tienen una opción seleccionada, y selecciona la opción predeterminada ("2" en este caso).

Intenté usar en :selectedlugar de [selected], pero eso no funcionó porque siempre se selecciona algo, incluso si nada tiene el atributo


0

Si necesita verificar explícitamente cada opción para ver si alguna tiene el atributo "seleccionado", puede hacerlo. De lo contrario, utilizando option:selectedobtendrá el valor de la primera opción predeterminada.

var viewport_selected = false;      
$('#viewport option').each(function() {
    if ($(this).attr("selected") == "selected") {
        viewport_selected = true;
    }
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.