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




bootstrap vertikales (25)

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


Answers

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

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


Ich habe so etwas gemacht und lade über Ajax ein Dropdown-Element . Die obige Antwort ist ebenfalls akzeptabel, aber es ist immer gut, so wenig DOM-Modifikation wie möglich für eine bessere Leistung zu haben.

Anstatt also jedes Element in eine Schleife einzufügen, ist es besser, Elemente innerhalb einer Schleife zu sammeln und sie anzufügen, sobald sie abgeschlossen ist.

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

Fügen Sie es an,

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

oder noch besser

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

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

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: 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);

Sie können einfach mit dem folgenden Code über Ihr JSON-Array iterieren

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


 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


Das ist etwas schneller und sauberer.

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

Das ist, was ich mit zweidimensionalen Arrays gemacht habe: Die erste Spalte ist Item i, füge zu innerHTML der <option> . Die zweite Spalte ist record_id i, addiert zu dem value von <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();
        }
    }
    

Der einfache Weg ist:

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

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
}

Ein Kompromiss zwischen den beiden ersten Antworten, in einem "One-Liner":

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

Erstellt ein Array von Options-Elementen mit map und hängt sie dann alle gleichzeitig an Select an, indem Sie apply , um jede Option als separates Argument für die append Funktion zu senden.


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

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

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

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

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.


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

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

Das DOM Elements Creator Plugin verwenden (mein Favorit):

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

Verwenden des Konstruktors Option (nicht sicher über die Browserunterstützung):

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

Verwendung von document.createElement (Vermeidung zusätzlicher Arbeit beim Analysieren von HTML mit $("<option></option>") ):

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

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.


Es gibt einen Ansatz, der den Microsoft Templating-Ansatz verwendet , der derzeit für die Aufnahme in den jQuery-Core vorgeschlagen wird. Es gibt mehr Macht bei der Verwendung des Templating, so dass es für das einfachste Szenario möglicherweise nicht die beste Option ist. Weitere Details finden Sie in Scott Gus Post, in dem die Funktionen beschrieben werden.

Fügen Sie zuerst die Templating-JS-Datei hinzu, die von github verfügbar github .

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

Als Nächstes richten Sie eine Vorlage ein

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

Rufen Sie dann mit Ihren Daten die Methode .render () auf

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

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

Ich habe diesen Ansatz genauer beschrieben.



Da ich auch eine Möglichkeit habe, endlich eine Zeile oder einen bestimmten Ort hinzuzufügen, sollte ich auch folgendes teilen:

Zuerst die Länge oder die Reihen herausfinden:

var r=$("#content_table").length;

und fügen Sie dann die folgende Zeile hinzu:

$("#table_id").eq(r-1).after(row_html);






javascript jquery arrays html-select