1492 Stimmen

Darryl Hein avatar

Was ist der beste Weg, um Optionen zu einer Auswahl aus einem JavaScript-Objekt mit jQuery hinzufügen?

Gefragt el 4 de Oktober, 2008
Wann wurde die Frage gestellt
1076999 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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

Ich bin auf der Suche nach etwas, für das ich kein Plugin benötige, aber ich würde mich auch für die Plugins interessieren, die es bereits gibt.

Das habe ich getan:

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 bereinigte und vereinfachte Version von matdumsa's :

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

Änderungen von matdumsa's: (1) das close-Tag für die Option innerhalb von append() entfernt und (2) die Eigenschaften/Attribute in eine Map als zweiten Parameter von append() verschoben.

Gefragt el 4 de Oktober, 2008 von Darryl Hein

Antworten

Zu viele Anzeigen?

5voto

M.J avatar
M.J Punkte 2354

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 in das Dropdown 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
}
Beantwortet el 30 de Juli, 2016 von M.J (2354 Punkte )

4voto

Dr Fred avatar
Dr Fred Punkte 839

Mit der Funktion $.map() können Sie dies auf elegantere Weise tun:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
Beantwortet el 10 de Juli, 2017 von Dr Fred (839 Punkte )

3voto

Satyendra Yadav avatar
Satyendra Yadav Punkte 102 
<!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>
Beantwortet el 29 de Marsch, 2018 von Satyendra Yadav (102 Punkte )

3voto

Dulith De Costa avatar
Dulith De Costa Punkte 9549

Geben Sie Ihre HTML select id in die folgende Zeile ein. Hier hinein mySelect wird als id des Select-Elements verwendet.

   var options = $("#mySelect");

dann erhalten das Objekt, das die selectValues in diesem Szenario ist und setzt es auf die Jquery für jede Schleife. Es wird den Wert und den Text der Objekte entsprechend verwenden und fügt es in die Option Auswahlen wie folgt.

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

Dadurch wird Text als Optionsliste angezeigt, wenn eine Dropdown-Liste ausgewählt wird, und sobald ein Text ausgewählt ist, wird der Wert des ausgewählten Textes verwendet.

Beispiel.

"1": "Test 1", "2": "Test 2",

Dropdown,

Anzeigename: Test 1 -> Wert ist 1 Anzeigename: Test 2 -> Wert ist 2

Beantwortet el 11 de April, 2018 von Dulith De Costa (9549 Punkte )

3voto

kush avatar
kush Punkte 403 
 $.each(response, function (index,value) {
                        $('#unit')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.title));
                    });
Beantwortet el 22 de Oktober, 2021 von kush (403 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X