operator - manuale javascript per principianti




Qual è il modo migliore per aggiungere opzioni a una selezione da come un oggetto JS con jQuery? (20)

jQuery

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

JavaScript alla vaniglia

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

Qual è il metodo migliore per aggiungere opzioni a <select> da un oggetto JavaScript usando jQuery?

Sto cercando qualcosa che non ho bisogno di un plugin per fare, ma sarei interessato anche ai plugin che sono là fuori.

Questo è quello che ho fatto:

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 soluzione pulita / semplice:

Questa è una versione ripulita e semplificata di matdumsa :

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

Modifiche da Matdumsa: (1) rimosso il tag di chiusura per l'opzione all'interno di append () e (2) spostato le proprietà / attributi in una mappa come secondo parametro di append ().


  1. $.each è più lento di un ciclo for
  2. Ogni volta, una selezione DOM non è la migliore pratica nel ciclo $("#mySelect").append();

Quindi la soluzione migliore è la seguente

Se il responso dei dati JSON è

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

usalo come

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

Ancora un altro modo di farlo:

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

C'è un problema di ordinamento con questa soluzione in Chrome (jQuery 1.7.1) (Chrome ordina le proprietà dell'oggetto per nome / numero?) Quindi, per mantenere l'ordine (sì, è l'abuso di oggetti), ho cambiato questo:

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

a questo

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

e quindi $ .each avrà il seguente aspetto:

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

Come altre risposte, in modo jQuery:

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

Esiste un approccio che utilizza l'approccio Microsoft Templating attualmente in fase di proposta per l'inclusione nel core jQuery. C'è più potere nell'usare i modelli, quindi per lo scenario più semplice potrebbe non essere l'opzione migliore. Per maggiori dettagli vedi il post di Scott Gu che delinea le caratteristiche.

Per prima cosa includi il file js di template, disponibile da github .

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

Prossimo set-up di un modello

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

Quindi con i tuoi dati chiama il metodo .render ()

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

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

Ho blogged questo approccio in modo più dettagliato.


Ho fatto qualcosa di simile, caricando un oggetto a tendina tramite Ajax . Anche la risposta sopra è accettabile, ma è sempre bene avere il minor numero di modifiche del DOM il più possibile per ottenere prestazioni migliori.

Quindi, piuttosto che aggiungere ogni elemento all'interno di un ciclo, è meglio raccogliere elementi all'interno di un ciclo e aggiungerlo una volta completato.

$(data).each(function(){
    ... Collect items
})

Aggiungilo,

$('#select_id').append(items); 

o ancora meglio

$('#select_id').html(items);

Ho trovato che questo è semplice e funziona alla grande.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

Il modo semplice è:

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

Piuttosto che ripetere lo stesso codice ovunque, suggerirei che è più opportuno scrivere la propria funzione jQuery come:

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

Quindi per aggiungere un'opzione, procedi come segue:

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

Questo è leggermente più veloce e più pulito.

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

Questo è quello che ho fatto con gli array bidimensionali: la prima colonna è l'elemento i, aggiunta a innerHTML <option> . La seconda colonna è record_id i, aggiungi al value di <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();
        }
    }
    

Sebbene le risposte precedenti siano tutte risposte valide, potrebbe essere consigliabile aggiungere prima tutte queste a un documentoFragmnet, quindi aggiungere quel frammento di documento come elemento dopo ...

Vedi i pensieri di John Resig sull'argomento ...

Qualcosa sulla falsariga di:

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

Tutte queste risposte sembrano inutilmente complicate. Tutto quello che serve è:

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

Questo è completamente compatibile con browser incrociati.



Usando il plugin DOM Elements Creator (il mio preferito):

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

Usando il costruttore Option (non sono sicuro del supporto del browser):

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

Utilizzando document.createElement (evitando lavori extra analizzando 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('');

Ho fatto alcuni test e questo, credo, fa il lavoro il più veloce. : P


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


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

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

Questo manipola il DOM solo una volta dopo aver costruito una stringa gigante.





html-select