web-dev-qa-db-fra.com

Comment utiliser les données JSON pour renseigner les options d'une zone de sélection?

Je dois nourrir les villes en fonction du pays de sélection. Je l'ai fait par programme, mais je ne sais pas comment insérer des données JSON dans la zone de sélection. J'ai essayé jQuery de plusieurs manières, mais aucune d'entre elles n'a fonctionné.

La réponse que je reçois (je peux formater cela différemment si nécessaire):

["<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>"]

Mais comment puis-je mettre ces données comme options dans une balise HTML <select></select>?

Le code que j'ai essayé:

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

J'ai également essayé d'utiliser ce didacticiel sur le remplissage automatique des boîtes de sélection à l'aide de jQuery et AJAX , mais cela n'a jamais rien fait à part remplir ma sélection avec "UNDEFINED" pour moi, même si j'ai reçu la réponse au format le tutoriel suggéré.

<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>
javascriptjqueryhtmljson
47
Pizdabol

Pourquoi ne pas simplement faire en sorte que le serveur renvoie les noms?

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

Créez ensuite les éléments <option> à l'aide de 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

Compte rendu json de votre: //site.com:

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

Utilisez ceci:

    $.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

Vous devriez le faire comme ça:

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

À votre santé

17
Edgar Villegas Alvarado

Jetez un coup d'œil à Moteur de vue JQuery et chargez simplement le tableau dans une liste déroulante: 

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

Voir les détails ici: https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

0
Jovan MSFT

zeusstl a raison. cela fonctionne pour moi aussi.

   <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