javascript - resueltos - llamar funcion jquery onclick




¿Cuál es la mejor manera de agregar opciones a una selección como un objeto JS con jQuery? (20)

¿Cuál es el mejor método para agregar opciones a un <select> desde un objeto de JavaScript usando jQuery?

Estoy buscando algo para lo que no necesito un complemento, pero también estaría interesado en los complementos que están disponibles.

Esto es lo que hice:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Una solución limpia / simple:

Esta es una versión limpia y simplificada de matdumsa :

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Cambios de matdumsa: (1) eliminó la etiqueta de cierre para la opción dentro de append () y (2) movió las propiedades / atributos a un mapa como el segundo parámetro de append ().


jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilla JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

  1. $.each es más lento que un bucle for
  2. Cada vez, una selección de DOM no es la mejor práctica en el bucle $("#mySelect").append();

Así que la mejor solución es la siguiente.

Si la respuesta de datos JSON es

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

usalo como

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Adviértase ... Estoy usando jQuery Mobile 1.0b2 con PhoneGap 1.0.0 en un teléfono Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) y no pude hacer funcionar el método .append (). Tuve que usar .html () como sigue:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

Aunque las respuestas anteriores son todas válidas, puede ser recomendable agregar todas estas a un documentFragmnet primero, luego agregar ese fragmento de documento como un elemento después de ...

Vea los pensamientos de John Resig al respecto ...

Algo a lo largo de las líneas de:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

El formato JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Y el código jQuery para completar los valores del menú desplegable en el éxito Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

En lugar de repetir el mismo código en todas partes, sugeriría que es más conveniente escribir su propia función jQuery como:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Luego para agregar una opción solo haz lo siguiente:

$('select').addOption('0', 'None');

Eso es lo que hice con matrices bidimensionales: la primera columna es el elemento i, agregar a innerHTML de la <option> . La segunda columna es record_id i, agregue al value de <option> :

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
    $items_arr = array();
    $i = 0;
    foreach ($items as $item)
    {
        $first_name = $item->first_name;
        $last_name = $item->last_name;
        $date = $item->date;
        $show = $first_name . " " . $last_name . ", " . $date;
        $request_id = $request->request_id;
        $items_arr[0][$i] = $show;
        $items_arr[1][$i] = $request_id;
        $i++;
    }
    
    echo json_encode($items_arr);
    
  2. JavaScript / Ajax

            function ddl_items() {
                if (window.XMLHttpRequest) {
                    // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // Code for Internet Explorer 6 and Internet Explorer 5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var arr = JSON.parse(xmlhttp.responseText);
                    var lstbx = document.getElementById('my_listbox');
    
                    for (var i=0; i<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }
    

Esto es un poco más rápido y más limpio.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

Hay un enfoque que utiliza el enfoque de plantilla de Microsoft que actualmente está siendo propuesto para su inclusión en el núcleo de jQuery. Hay más poder en el uso de las plantillas, por lo que, para el escenario más simple, puede que no sea la mejor opción. Para más detalles, vea la publicación de Scott Gu que describe las características.

Primero incluye el archivo js de plantillas, disponible en github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Siguiente configurar una plantilla

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Luego con tus datos llama al método .render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

He blogged este enfoque con más detalle.


Hay un problema de clasificación con esta solución en Chrome (jQuery 1.7.1) (¿Chrome ordena las propiedades del objeto por nombre / número?) Así que para mantener el orden (sí, es objeto de abuso), cambié esto:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

a esto

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

y luego el $. cada uno se verá como:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

Igual que otras respuestas, de manera jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

La forma más sencilla es:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Simplemente puede iterar sobre su matriz json con el siguiente código

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");


Todas estas respuestas parecen innecesariamente complicadas. Todo lo que necesitas es:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Eso es totalmente compatible con todos los navegadores.


Un compromiso de tipo entre las dos respuestas principales, en un "one-liner":

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Construye una matriz de elementos de Opción usando el map y luego los agrega a la Selección de una vez usando apply para enviar cada Opción como un argumento separado en la función de append .


Usando el complemento DOM Elements Creator (mi favorito):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Usando el constructor de Option (no estoy seguro sobre el soporte del navegador):

$(new Option('myText', 'val')).appendTo('#mySelect');

Usando document.createElement (evitando el trabajo extra analizando HTML con $("<option></option>") ):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

He hecho algunas pruebas y esto, creo, hace el trabajo más rápido. :PAG


$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Funciona bien con jQuery 1.4.1.

Para ver el artículo completo sobre el uso de listas dinámicas con ASP.NET MVC y jQuery, visite: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx


if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Esto manipula el DOM solo una vez después de la primera construcción de una cadena gigante.





html-select