¿Cómo configuro dinámicamente la opción seleccionada de una lista desplegable usando JQuery, Javascript y html?

Por alguna razón, no puedo hacer que esto funcione.¿Cómo configuro dinámicamente la opción seleccionada de una lista desplegable usando JQuery, Javascript y html?

Mi lista de opciones está poblada de forma dinámica utilizando estos scripts:

function addOption(selectId, value, text, selected) { 
    var html = '<option value="'+value+'">'+text+'</option>'; 
    if (selected == "on") { 
     html = '<option value="'+value+'" selected="selected">'+text+'</option>'; 
    } 
    $('#'+selectId).append(html); 
} 

function addSalespersonOption(id, name, defsales) { 
    addOption('salesperson', id, name, defsales); 
}

Aquí es el html:

td class="text-r"><label for="salesperson">Salesperson:</label></td> 
<td> 
    <select id="salesperson"> 
     <option value="">(select)</option> 
    </select> 
</td>

Hasta el momento, la salida es:

<option value="1266852143634" selected="selected">Eric Hunt</option>

Los espectáculos DOM esto:

index    2 
disabled   false 
value    "1266852143634" 
text    "Eric Hunt" 
selected   false 
defaultSelected true

Pero por alguna razón, cuando se carga la página, el menú desplegable no muestra a Eric Hunt como preseleccionado. Tampoco es nada por el estilo.

cómo puedo obtener "selected true" en lugar de "defaultSelected true".

EDIT: Como resultado, el código anterior funciona perfectamente, gracias a la ayuda de deceze y respuestas rosscj2533 's desde abajo. La única razón por la que no funciona para mí es que encontré un código de rubí que sobrescribía los elementos seleccionados.

Gracias por la ayuda de todos, en este

Saludos

Fuente

2010-02-23 Eric Hunt

Su función 'addOption' parece bastante raro. La primera vez que lo llamas como una función, la segunda vez que lo pasas a '$()' como un objeto, es probablemente donde está tu problema. Solo para asegurarme de que entiendo lo que quieres hacer: estás tratando de insertar una nueva opción en un elemento 'select' existente y seleccionar esa opción, ¿verdad? – deceze

La función addSalespersonOption (id, name, defsales) { addOption ('vendedor', id, nombre, defsales); está generando dinámicamente una lista de opciones de datos almacenados que se utilizarán en el elemento de selección. La declaración if fue mi intento de determinar si una de esas opciones se mostrará como la selección predeterminada en el elemento de selección. como lo haríamos si codificáramos el elemento seleccionado.

defaultSelected El atributo no es ajustable, es sólo con fines informativos:

Quote:

The defaultSelected property returns the default value of the selected attribute.
This property returns true if an option is selected by default, otherwise it returns false.

Creo que desee:

$('option[value=valueToSelect]', newOption).attr('selected', 'selected');

es decir, establezca el atributo selected del option que desea seleccionar.

Sin tratar de arreglar su código, aquí es más o menos la forma en que lo haría:

function buildSelect(options, default) { 
    // assume options = { value1 : 'Name 1', value2 : 'Name 2', ... } 
    //  default = 'value1' 

    var $select = $('<select></select>'); 
    var $option; 

    for (var val in options) { 
     $option = $('<option value="' + val + '">' + options[val] + '</option>'); 
     if (val == default) { 
      $option.attr('selected', 'selected'); 
     } 
     $select.append($option); 
    } 

    return $select; 
}

Parece que tienes un montón de equipaje y las dependencias ya y que no se puede decir cuál es la mejor integre la opción seleccionada en su código sin ver más, pero espero que esto ayude.

Fuente

2010-02-23 03:47:45 deceze

Gracias deceze, pero no puedo hacer que esto funcione. –

Encontré otra función que era parte de este problema. Entonces, reformulé la pregunta anterior para incluir la función y espero que tenga más sentido. Gracias por toda su ayuda hasta ahora. –

Su sintaxis es incorrecta.

es necesario llamar a attr con dos parámetros, así:

$('.salesperson', newOption).attr('defaultSelected', "selected");

su código actual asigna el valor "selected" a la variable defaultSelected, a continuación, pasa a ese valor a la función attr, que luego devolver el valor del atributo selected.

Fuente

2010-02-23 03:18:06 SLaks

Gracias, pero no hubo suerte.También probé $ ('. Salesperson', addOption) .attr ('defaultSelected', true); –

Aquí hay otra manera de cambiar la opción seleccionada de un elemento <select> en javascript. Puede usar

document.getElementById ('salesperson'). SelectedIndex = 1;

Al establecerlo en 1, se seleccionará el segundo elemento de la lista desplegable. El índice del elemento de selección comienza desde 0.

Aquí hay un código de muestra. Compruebe si se puede utilizar este tipo de enfoque:

<html> 
<head> 
<script language="javascript"> 

function changeSelected() { 
document.getElementById('salesperson').selectedIndex=1; 

} 

</script> 
</head> 
<body> 
<form name="f1"> 

<select id="salesperson" > 
    <option value"">james</option> 
    <option value"">john</option> 
</select> 
<input type="button" value="Change Selected" onClick="changeSelected();"> 

</form> 
</body> 
</html>

Fuente

2010-02-23 05:20:16

Perdón mi ignorancia, pero ¿por qué se está utilizando en lugar de $('.salesperson')$('#salesperson') cuando se trata de una identificación?

Fuente

2010-02-23 05:32:36

+10

¡Porque soy nuevo y no sé lo que estoy haciendo! –

Tu código funciona para mí. ¿Cuándo se llama a addSalespersonOption? Puede haber un problema con esa llamada.

También algo de su html está un poco apagado (¿tal vez problema de copiar/pegar?), Pero eso no pareció causar ningún problema. Su seleccione debe tener este aspecto:

<select id="salesperson"> 
    <option value="">(select)</option> 
</select>

en lugar de esto:

<select id="salesperson" /> 
    <option value"">(select)</option> 
</select>

Editar: ¿Cuándo su lista de opciones de obtener dinámicamente poblada? ¿Está seguro de que está pasando 'on' por el valor defSales en su llamada al addSalespersonOption? Intente cambiar el código a este:

if (selected == "on") { 
    alert('setting default selected option to ' + text); 
    html = '<option value="'+value+'" selected="selected">'+text+'</option>'; 
}

y vea si la alerta sucede y qué dice si sucede.

Edición: Working example de mi prueba (el error: undefined es de jsbin, no es mi código).

Fuente

2010-02-24 14:43:16 rosscj2533

No sé cómo saber cuándo se llama a addSalespersonOption. Gracias por la corrección de error tipográfico. –

Ok, sí, la alerta dice: "configuración de la opción seleccionada por defecto para Eric Hunt". –

Hmmm, bueno, parece que debería funcionar para usted. No puedo decir mucho más sin ver el resto de tu código. Publicaré un ejemplo de trabajo y veré si puedes ver la diferencia entre él y tu código. – rosscj2533

SCRIPT

<script type="text/javascript"> 
    $(function(){ 
     $("#gender").val("Male").attr("selected","selected"); 
    }); 
</script>

HTML

<select id="gender" selected="selected"> 
    <option>--Select--</option> 
    <option value="1">Male</option> 
    <option value="2">Female</option> 
</select>

Click Here More Details

Fuente

2015-10-19 18:56:54 Tamilan

Aquí va.

// Select by value 
 
$('select[name="options"]').find('option[value="3"]').attr("selected",true); 
 

 
// Select by text 
 
//$('select[name="options"]').find('option:contains("Third")').attr("selected",true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<select name="options"> 
 
     <option value="1">First</option> 
 
     <option value="2">Second</option> 
 
     <option value="3">Third</option> 
 
</select> 
 
</body> 
 
</html>

Fuente

2017-09-11 13:59:34

¿Cómo configuro dinámicamente la opción seleccionada de una lista desplegable usando JQuery, Javascript y html?

Respuesta

Cuestiones relacionadas