Cómo establecer el recuadro de selección del valor seleccionado

Question

Tengo un campo de entrada con ancho variable como small, large, medium. Tengo un estilo de CSS para eso.

Ejemplo:

case 1: <input type="text" id="a1" class="title small required" /> 
case 2: <input type="text" id="a1" class="title medium" /> 
case 3: <input type="text" id="a1" class="title large required" /> 

Mientras tanto, tengo una caja select:

<select id="b1"> 
    <option value="small">Small</option> 
    <option value="medium">Medium</option> 
    <option value="large">Large</option> 
</select> 

lo que necesito ahora es comprobar el campo input tiene clase de small o medium o large y para establecer el caja relevante select como selected. En jQuery he establecido directamente los valores seleccionados como medium, pero aun así el desplegable muestra small.

¿Cómo puedo comprobar si el campo input tiene alguna de estas clases utilizando la función hasClass()? ¿Podemos verificar esto a la vez?

Answer 1

Utilice esta

$('#b1').val("small"); // to set small as selected 

$('#b1').val("medium"); 

$('#b1').val("large"); 

Utilice .hasClass() para el próximo.

var size = $("#al").hasClass('small')? 'small': 
    ($("#a1").hasClass('medium')? 'medium' : 
    ($("#a1").hasClass('large')? large :' null')); 
alert(size); 

Answer 2

"En jQuery he puesto directamente los valores seleccionados como 'medio', pero aún así el desplegable muestra pequeña"

Usted no se presenta el código de jQuery, pero permite establecer el valor del elemento de selección con id="1" que haría esto:

$("#1").val("medium"); // or, obviously, use a variable instead of "medium" 

Pero en tu caso que ha utilizado id="1" tanto para el selecto y el campo de entrada, que es hTML no válido - id debe ser único. En la mayoría de los buscadores, al seleccionar por una identificación que está duplicada, simplemente seleccionará el primer elemento con esa identificación.

Cambie el id sy actualice su jQuery para que coincida y debería funcionar bien. (Si eso no funciona, por favor, actualice su pregunta para mostrar realmente su código JS y podemos proporcionar más ayuda.)

Answer 3

en primer lugar id tiene que ser único en una página html

En primer lugar elegir un selector de seleccionar el elemento de entrada correctamente .. estoy usando el selector de clase título desde su allí en todos los casos

var selectedOption=""; 
if($('.title').hasClass('small')) 
{ 
    selectedOption='small'; 
} 
else if($('.title').hasClass('medium')) 
{ 
    selectedOption='medium'; 
} 
else 
{ 
    selectedOption='large'; 
} 

//i am assuming you have only one select on your page, else replace it with id selector 
$("select option[value="+selectedOption+"]")).prop('selected','true'); //setting the correct option as selected