<select> ventana que no se actualiza después del cambio en el atributo seleccionado en <option>

El formulario de registro que estoy creando tiene opción comercial y residencial en el menú desplegable de selección.<select> ventana que no se actualiza después del cambio en el atributo seleccionado en <option>

Según el tipo de página activa, cambio la opción seleccionada predeterminada.

Aquí está el html:

<select class="type_c" name="type_c"> // default selected is business 
    <option value="Business" selected="selected">Business</option> 
    <option value="Residential">Residential</option> 
</select>

Aquí está el código corro en el pie de cada página para cambiar esos valores:

$(function(){ 

    var pageType = getPageType(); // returns either 'Business' or 'Residential' 

    $('.type_c option').each(function(){ 
     $(this).removeAttr('selected'); 
    }); 

    $('.type_c option').each(function(){ 
     if($(this).html() == pageType) 
      $(this).attr('selected','selected') 
    }); 

});

La cuestión es que cuando está en una página 'residencial' , la opción 'Residencial' se selecciona en DOM pero visualmente, la opción 'Negocio' está seleccionada.

Gracias.

Fuente

2012-05-18 MonOve

Se realizó una edición para indicar que esto solo ocurre en Firefox. Estaba pensando que siempre estaba sucediendo. –

Sine esto está cambiando el atributo después del valor inicial, es técnicamente una propiedad, y debe usar $(this).prop() en lugar de $(this).attr().

Además, trate de establecer el valor en true en lugar de selected

$(this).prop('selected',true);

Como alternativa, también se puede establecer el valor del elemento select:

$('.type_c').val(pageType);

Fuente

2012-05-18 17:40:19

después de implementar su sugerencia, el html muestra ninguno seleccionado – MonOve

Podría ser la versión de JQuery. Me olvido cuando agregaron '.prop()' –

Para la versión más alta jQuery, necesitamos prop() en lugar de attr()! Buena atrapada. –

Me verificar lo estás volviendo está evaluando correctamente. Hice una página HTML en blanco con el siguiente código. Puede ver que la opción seleccionada se procesa de manera diferente dependiendo de la cadena a la que tenga "pageType" configurado.

<html> 

<head> 
<script type="text/javascript" src="json2.min.js"> </script> 
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script> 
<script type="text/javascript" src="jquery.cookie.js"> </script> 
</head> 

<script> 
$(function(){ 

    var pageType = 'Residential'; // returns either 'Business' or 'Residential' 

    $('.type_c option').each(function(){ 
     $(this).removeAttr('selected'); 
    }); 

    $('.type_c option').each(function(){ 
     if($(this).html() == pageType) 
      $(this).attr('selected','selected') 
    }); 

}); 

</script> 

<body> 

<select class="type_c" name="type_c"> // default selected is business 
    <option value="Business" selected="selected">Business</option> 
    <option value="Residential">Residential</option> 
</select> 



</body> 
</html>

Fuente

2012-05-18 17:50:18 wrec

He confirmado que tengo la salida correcta.Como mencioné, este problema es solo con Firefox, se muestra perfectamente en otros navegadores. – MonOve

He tenido algo así antes. A Firefox le gusta guardar el estado de los elementos del formulario, por lo que cuando la página se recarga, muestra la selección de la última sesión, incluso si se ha modificado mediante JavaScript. Normalmente tengo que cargar la página desde cero (voy a la url y presiono enter, en lugar de volver a cargar).

No estoy seguro si eso ayudará, pero me ha pasado en el pasado.

(I creó una segunda respuesta, porque esto es completamente diferente.)

Fuente

2012-05-18 20:19:11

Si alguien tiene el mismo problema que yo, ralized que era la versión de jQuery. Por ejemplo esto:

var SetValue = function(dropDownElement, valueToSet){ 
dropDownElement.after("<br> Set to: "+valueToSet); 
dropDownElement.find("option").removeAttr("selected"); 
unitsTypeControl.find("option").filter(function() { 
    return this.text === valueToSet; 
}).attr('selected', true); 
}

https://codepen.io/RolandoRetana/pen/GQrByQ

funciona en IE pero no en Chrome, después de actualizar a la última versión de jQuery, que trabajaron en ambos.

Fuente

2018-02-09 23:54:17

<select> ventana que no se actualiza después del cambio en el atributo seleccionado en <option>

Respuesta

Cuestiones relacionadas