¿Cómo agrego opciones a DropDownList usando jQuery?



Answers

Sin complementos, esto puede ser más fácil sin usar tanto jQuery, en cambio 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) );
Question

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

Gracias




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

Hice que mi controlador en MVC devuelva una lista de selección con solo un artículo.

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



Necesitaba agregar tantas opciones a los menús desplegables como había 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 las listas 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 recibió "2" en el cuadro, etc.).

Era ridículo que no pudiera usar this o this this.Object o $.obj o algo así en mi 2º. .each() , sin embargo --- en realidad tenía que obtener la identificación específica de ese objeto y luego tomar y pasar ese objeto completo a mi función antes de que se agregue. Afortunadamente, la ID de mi menú desplegable estaba separada por un "_" y pude tomarla. No creo que debería haber tenido que hacerlo, pero de todos modos me daba excepciones jQuery. Algo que otros que luchan con lo que yo podría disfrutar saber.







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));
});



Related