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

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

Gracias

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!

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

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

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

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

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

U puede usar directo

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

-> Aquí puedes usar cadena directa

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

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.

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.

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 ...

prueba esta función:

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