¿Cómo agrego opciones a un DropDownList usando jQuery?


291

Como dice la pregunta, ¿cómo agrego una nueva opción a un DropDownList usando jQuery?

Gracias


Solo por curiosidad, ¿por qué esta pregunta fue rechazada? Probablemente porque no muestra ningún fragmento de código :)
shasi kanth

Respuestas:


451

Sin usar complementos adicionales,

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Si tenía muchas opciones, o si este código necesitaba ejecutarse con mucha frecuencia, entonces debería considerar usar un DocumentFragment en lugar de modificar el DOM muchas veces innecesariamente. Sin embargo, solo por un puñado de opciones, diría que no vale la pena.

------------------------------- Adicional ------------------ --------------

DocumentFragmentes una buena opción para mejorar la velocidad, pero no podemos crear elementos opcionales document.createElement('option')ya que IE6 e IE7 no lo admiten.

Lo que podemos hacer es crear un nuevo elemento de selección y luego agregar todas las opciones. Una vez que finalice el ciclo, agréguelo al objeto DOM real.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

¡De esta manera modificaremos DOM solo una vez!


8
Los parámetros del método son un poco engañosos, la función (val, texto) debería ser función (índice, opción) por ejemplo. Funciona bien de lo contrario.
mbillard 01 de

14
@Crossbrowser: no estoy de acuerdo, valy en textrealidad describo las variables y su uso.
nickf

1
solo para ese ejemplo, sin embargo, como método de propósito general, esas variables son engañosas (no me dio idea de cómo usar ese método). Sin embargo, daré por sentado que la respuesta no fue sobre el uso del método $ .each.
mbillard

1
Estaba usando anteriormente mySelect.append(new Option(text, val));, que no funcionaba en IE8. Tuve que cambiar a @ nickf'smySelect.append($('<option></option>').val(val).html(text));
Matthew Clark

55
@briansol:.attr('selected', true|false)
nickf

167

Sin complementos, esto puede ser más fácil sin usar tanta jQuery, en lugar de ir un poco más a la vieja escuela:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Si desea especificar si la opción a) es el valor seleccionado por defecto yb) debe seleccionarse ahora, puede pasar dos parámetros más:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

1
¿Cómo se configuran las propiedades como seleccionar un valor predeterminado?
Krishnan

20
Este me gusta más que el "<option></option>"método; Eso parece sucio.
Josh M.

1
no funciona en ie8 ... solo lo probé y también vi otro comentario sobre esto a continuación.
briansol

13

Con el complemento: jQuery Selection Box . Puedes hacerlo:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 

11

Es posible que desee borrar su DropDown primero $ ('# DropDownQuality'). Empty ();

Hice que mi controlador en MVC devolviera una lista de selección con solo un elemento.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

7

Agregar elemento a la lista al principio

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Agregar elemento a la lista al final

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Operación desplegable común (Obtener, Establecer, Agregar, Eliminar) usando jQuery


1
Si usa comillas dobles dentro de los parámetros de su opción, cerrarán la función y romperán el script. Cambiar .prepend("...") / $("...")a .prepend('...') / $('...')arreglaría el fragmento.
Heraldmonkey

4

Nota de Pease La solución de @ Phrogz no funciona en IE 8, mientras que @ nickf funciona en todos los principales navegadores. Otro enfoque es:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});

3

U puede usar directo

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> Aquí puedes usar cadena directa



0

usando jquery puedes usar

      this.$('select#myid').append('<option>newvalue</option>');

donde " myid " es la identificación de la lista desplegable y newvalue es el texto que desea insertar.


0

Necesitaba agregar tantas opciones a los menús desplegables como había menús desplegables en mi página. Entonces lo usé de esta manera:

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

Esto configuró dinámicamente los menús desplegables con valores como 1 a n, y seleccionó automáticamente el valor para el orden en que estaba el menú desplegable (es decir, el segundo menú desplegable obtuvo "2" en el cuadro, etc.).

Era ridículo que no pudiera usar thiso this.Objecto$.obj ni nada de eso en mi segundo .each(), aunque --- que en realidad tenía que obtener el ID específico de ese objeto y luego agarrar y pasar todo ese objeto a la función antes de que sería añadir. Afortunadamente, la identificación de mi menú desplegable estaba separada por una "_" y pude tomarla. No creo que debería haber tenido que hacerlo, pero de otra manera me daba excepciones jQuery. Algo que otros que luchan con lo que yo era podría disfrutar sabiendo.


¿Por qué estás incrementando el contador en cada uno? ¿Eres nuevo en jquery? var counter = $ ('[id * = "ddlPosition _"]'). length es menos detallado y más eficiente. Creo que necesita un poco más de experiencia antes de comenzar a publicar su código. Este no es un código de calidad de producción, ya que está mal escrito y es demasiado complejo para una tarea tan trivial. Sin ofender, pero hay una razón por la que tiene 58 respuestas y ningún voto positivo.
Athens Holloway

Obviamente entendiste mal lo que estaba creando. El contador es para incrementar el valor publicado en el menú desplegable, y tuve varios con la misma ID, solo con un "_ ##" diferente al final, por lo que .length () habría sido inexacto. Esa es la razón para el "id * =" en el selector.
vapcguy

En cuanto a mis otras respuestas, generalmente abogo por métodos más simples siempre que sea posible, y si las personas no fueran tan esotéricas con su codificación y escribieran cosas que fueran más simplificadas, mis respuestas probablemente tendrían más votos. Pero las personas quieren verse inteligentes y no elegirán algo tan simple. No me hace equivocarme por querer simplemente la industria. Tampoco disfruto solucionar problemas o construir sobre el código de otras personas que es ridículamente más complejo de lo que debe ser.
vapcguy

También podría tener más confianza en $ (this) .length () en ese ciclo más si alguien pudiera explicar por qué enviar "$ (this)" en lugar del objeto a myAppender no funcionó.
vapcguy

0

Pensemos que su respuesta es "successData". Contiene una lista que debe agregar como opciones en un menú desplegable.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

Esto funcionaría para ti ...


-1

prueba esta función:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
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.