change - jquery set selected option by text

Crear programáticamente listas de selección

Question

¿Alguien sabe de una técnica para crear programáticamente una lista de selección HTML que incluya opciones usando JQuery?

Answer 1

Aquí hay otra versión de una respuesta a la pregunta usando ajax para obtener una respuesta json utilizada para crear la lista de selección con pares de valores clave

        $.ajax({
        type: ''post'',
        url: ''include/parser.php'',
        data: {                     
            mode: ''getSubtypes'',
            type: type
        },
        success: function (response) {
            var mySubtype = document.getElementById("Component");
            var components = $.parseJSON(response);

            var selectList = document.createElement("select");
            selectList.id = "subtype";
            selectList.name = "subtype";
            mySubtype.appendChild(selectList);
            $(''#subtype'').append(''<option value="">Select ...</option>'');
            $.each(components, function(k, v) {
                var option = new Option(v, k); 
                $(''#subtype'').append($(option));               
            });
        }
    });        

Answer 2

Aquí hay una variación, basada en las respuestas anteriores de este hilo, donde todas las opciones, excepto las de entrada de selección, se pueden especificar a través de un objeto JSON de entrada:

Sería interesante ver si la matriz de opciones se puede especificar de alguna manera en esa entrada JSON?

    var fruitListProfile = {
        id : someKey,
        class : ''fruit_list'',
        style : ''margin-right: 20px; ''
    };

    var selectInput = $(''<select/>'', fruitListProfile);

    var fruitOptions = [''apple'', ''cherry'', ''kiwi''];
    for (var i in fruitOptions) {
        selectInput.append($(''<option/>'').html(fruitOptions[i]));
    }

Answer 3

Esto es muy sencillo de hacer:

var selectList = "<select name=''numbers''>";
for (var x = 0; x < 10; x++) {
    selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$(''#my-container'').html(selectList);

Answer 4

Sé que esto es viejo, pero qué hey:

$selectBox.html($.map(myArray, function(){
    return $(''<option/>'', {text: this});
}));

Answer 5

Si ya tiene una lista <select> en algún lugar de DOM, vuelva a utilizarla y vacíela de las interacciones previas del usuario ...

// Call existing list, chain empty()
var my_list = $("#my_list").empty();

// Build list
$(my_arr).each(function() {
 my_list.append($(<option>").attr(/'value/',this.item_id).text(this.item_name));
});

Answer 6

var arr = [
  {val : 1, text: ''One''},
  {val : 2, text: ''Two''},
  {val : 3, text: ''Three''}
];

var sel = $(''<select>'').appendTo(''body'');
$(arr).each(function() {
 sel.append($("<option>").attr(''value'',this.val).text(this.text));
});

Answer 7

var s = $(''<select/>'');
var o = [1, 2, 3];
for (var i in o) {
    s.append($(''<option/>'').html(o[i]));
}
$(''body'').append(s);