it-swarm.com.de

Wie kann ich JSON-Daten verwenden, um die Optionen einer Auswahlbox aufzufüllen?

Ich muss Städte anhand des Auswahllandes ernähren. Ich habe es programmgesteuert gemacht, habe aber keine Ahnung, wie man JSON-Daten in die Auswahlbox einfügt. Ich habe mehrere Möglichkeiten mit jQuery ausprobiert, aber keine davon funktionierte.

Die Antwort, die ich bekomme (ich kann dies ggf. anders formatieren):

["<option value='Woodland Hills'>Woodland Hills<\/option>","<option value='none'>none<\/option>","<option value='Los Angeles'>Los Angeles<\/option>","<option value='Laguna Hills'>Laguna Hills<\/option>"]

Aber wie kann ich diese Daten als Optionen in ein HTML <select></select>-Tag einfügen?

Der Code, den ich ausprobiert habe:

<form action="" method="post">
<input id="city" name="city" type="text" onkeyup="getResults(this.value)"/>
<input type="text" id="result" value=""/>
<select id="myselect" name="myselect" ><option selected="selected">blank</option></select>
</form>
</div>

<script>
function getResults(str) {
  $.ajax({
        url:'suggest.html',
        type:'POST',
        data: 'q=' + str,
        dataType: 'json',
        success: function( json ) {
            $('#myselect').append(json);

        }
    });
};

$( '.suggest' ).keyup( function() {
   getResults( $( this ).val() );
} );
</script>

Ich habe auch versucht, dieses Tutorial zum automatischen Ausfüllen von Auswahlfeldern mit jQuery und AJAX zu verwenden, aber dies hat nie etwas anderes getan, als meine Auswahl mit "UNDEFINED" zu füllen, obwohl ich die Antwort im Format erhielt das Tutorial vorgeschlagen.

<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#city").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#myselect").html(options);
    })
  })
})
</script>
47
Pizdabol

Warum lässt man den Server nicht einfach die Namen zurückgeben?

["Woodland Hills", "none", "Los Angeles", "Laguna Hills"]

Dann erstellen Sie die <option>-Elemente mit JavaScript.

$.ajax({
    url:'suggest.html',
    type:'POST',
    data: 'q=' + str,
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
            $('#myselect').append($('<option>').text(value).attr('value', value));
        });
    }
});
97
Samir Talwar

Gegebenes zurückgegebenes Json von Ihrem: //site.com:

[{text:"Text1", val:"Value1"},
{text:"Text2", val:"Value2"},
{text:"Text3", val:"Value3"}]

Benutze das:

    $.getJSON("your://site.com", function(json){
            $('#select').empty();
            $('#select').append($('<option>').text("Select"));
            $.each(json, function(i, obj){
                    $('#select').append($('<option>').text(obj.text).attr('value', obj.val));
            });
    });
24
zeusstl

Du solltest es so machen:

function getResults(str) {
  $.ajax({
        url:'suggest.html',
        type:'POST',
        data: 'q=' + str,
        dataType: 'json',
        success: function( json ) {
           $.each(json, function(i, optionHtml){
              $('#myselect').append(optionHtml);
           });
        }
    });
};

Prost

Werfen Sie einen Blick auf JQuery View Engine und laden Sie das Array einfach in ein Dropdown-Menü: 

$.ajax({
    url:'suggest.html',
    type:'POST',
    data: 'q=' + str,
    dataType: 'json',
    success: function( json ) {
          // Assumption is that API returned something like:["North","West","South","East"];
          $('#myselect').view(json);
    }
});

Details finden Sie hier: https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

0
Jovan MSFT

zeusstl hat recht. es funktioniert auch für mich.

   <select class="form-control select2" id="myselect">
                      <option disabled="disabled" selected></option>
                      <option>Male</option>
                      <option>Female</option>
                    </select>

   $.getJSON("mysite/json1.php", function(json){
        $('#myselect').empty();
        $('#myselect').append($('<option>').text("Select"));
        $.each(json, function(i, obj){

  $('#myselect').append($('<option>').text(obj.text).attr('value', obj.val));
        });
  });
0
Michael Bobis