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

new option jquery

Question

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

Gracias

Answer 1

Añadir elemento a la lista en el principio

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

Añadir 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

Answer 2

Con el plugin: jQuery Selection Box . Puedes hacerlo:

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

Answer 3

Necesitaba agregar tantas opciones a los menús desplegables como archivos desplegables en mi página. Así que 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 se encontraba el menú desplegable (es decir, el segundo menú desplegable tiene "2" en el cuadro, etc.).

Era ridículo que no pudiera usar this o this this.Object o $.obj o algo así en mi 2nd .each() , aunque --- en realidad tuve que obtener la ID específica de ese objeto y luego agarrar y pasar esa Objeto completo a mi función antes de que se agregue. Afortunadamente, la identificación de mi menú desplegable estaba separada por una "_" y podía agarrarla. No creo que debiera haberlo hecho, pero de lo contrario me seguía dando excepciones a jQuery. Algo que otros luchando con lo que yo era podrían disfrutar sabiendo.

Answer 4

Sin complementos, esto puede ser más fácil sin usar tanto 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 o no el valor seleccionado predeterminado, y b) debería seleccionarse ahora, puede pasar dos parámetros más:

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

Answer 5

Sin usar ningún plugin extra,

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 este código tenía que ejecutarse con mucha frecuencia, debería utilizar un DocumentFragment lugar de modificar el DOM muchas veces innecesariamente. Para solo unas pocas opciones, diría que no vale la pena.

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

DocumentFragment es una buena opción para mejorar la velocidad, pero no podemos crear el elemento de opción utilizando document.createElement(''option'') ya que IE6 y 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 el bucle haya finalizado, 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!

Answer 6

Tenga en cuenta que 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($("<option/>").attr("value", val).text(text));
});

Answer 7

U puede usar directo

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

-> Aquí puedes usar la cadena directa

Answer 8

Y también, use .prepend () para agregar la opción al inicio de la lista de opciones. http://api.jquery.com/prepend/

Answer 9

prueba esta función:

function addtoselect(param,value){
    $(''#mySelectBox'').append(''<option value=''+value+''>''+param+''</option>'');
}

Answer 10

usando jquery puedes usar

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

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

Answer 11

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

Mi controlador en MVC devolvió una lista de selección con solo un elemento.

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