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



5 Answers

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) );
jquery user-interface drop-down-menu

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

Gracias




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



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($("&lt;option/&gt;").attr("value", val).text(text));
});






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.




Related