javascript - trenner - bootstrap vertikales menü




Was ist der beste Weg, um Optionen zu einer Auswahl von als JS-Objekt mit jQuery hinzuzufügen? (20)

Was ist die beste Methode zum Hinzufügen von Optionen zu einem <select> von einem JavaScript-Objekt mit jQuery?

Ich suche nach etwas, für das ich kein Plugin benötige, aber ich würde mich auch für die Plugins interessieren, die da draußen sind.

Das habe ich gemacht:

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

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

Eine saubere / einfache Lösung:

Dies ist eine aufgeräumte und vereinfachte Version von Matdumsa :

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

Änderungen von Matdumsa: (1) entfernt das Schließen-Tag für die Option innerhalb von append () und (2) verschoben die Eigenschaften / Attribute in eine Karte als der zweite Parameter von append ().


jQuery

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

Reines JavaScript

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

  1. $.each ist langsamer als eine for Schleife
  2. Jedes Mal ist eine DOM-Auswahl nicht die beste $("#mySelect").append(); in Schleife $("#mySelect").append();

Also die beste Lösung ist das Folgende

Wenn JSON-Daten resp sind

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

benutze es als

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

All diese Antworten erscheinen unnötig kompliziert. Alles was Sie brauchen ist:

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

Das ist vollständig Cross-Browser-kompatibel.


Anstatt den gleichen Code überall zu wiederholen, würde ich vorschlagen, dass es wünschenswert ist, eine eigene jQuery-Funktion zu schreiben, wie:

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

Um dann eine Option hinzuzufügen, machen Sie folgendes:

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

Das JSON-Format:

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

Und der jQuery-Code zum Auffüllen der Werte zum Drop-Down bei Ajax-Erfolg:

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
}

Das ist etwas schneller und sauberer.

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

Das sieht besser aus, bietet Lesbarkeit, ist aber langsamer als andere Methoden.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Wenn Sie Geschwindigkeit wünschen, ist dies die schnellste (getestet!) Methode, die Array, keine String-Verkettung und nur einen Append-Aufruf verwendet.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

Der einfache Weg ist:

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


Es gibt ein Sortierproblem mit dieser Lösung in Chrome (jQuery 1.7.1) (Chrome sortiert Objekteigenschaften nach Name / Nummer?) Um die Reihenfolge beizubehalten (ja, das Objekt wird missbraucht), habe ich Folgendes geändert:

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

dazu

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

und dann wird das $ .Each wie folgt aussehen:

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

Genau wie andere Antworten in jQuery Mode:

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

Ich fand, dass das einfach ist und großartig funktioniert.

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

Ich kombiniere die zwei besten Antworten zu einer großartigen Antwort.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

Mit der Funktion $ .map () können Sie dies eleganter machen:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Obwohl die vorherigen Antworten alle gültige Antworten sind, kann es ratsam sein, all diese zuerst an ein documentFragmnet anzuhängen und dann dieses Dokumentfragment als Element anzufügen, nachdem ...

Siehe John Resigs Gedanken zu diesem Thema ...

Etwas in der Art von:

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

Seien Sie gewarnt ... Ich verwende jQuery Mobile 1.0b2 mit PhoneGap 1.0.0 auf einem Android 2.2 (Cyanogen 7.0.1) Telefon (T-Mobile G2) und konnte die .append () Methode überhaupt nicht verwenden. Ich musste .html () wie folgt verwenden:

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

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

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

Ich habe ein paar Tests gemacht und das, glaube ich, macht die Arbeit am schnellsten. : P


$.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));   
    });          
}   

Es funktioniert gut mit jQuery 1.4.1.

Den vollständigen Artikel zur Verwendung dynamischer Listen mit ASP.NET MVC und jQuery finden Sie unter 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);
}

Dies manipuliert das DOM nur einmal nach dem ersten Aufbau einer riesigen Saite.





html-select