我如何使用JSON数据填充select框的选项?

我需要根据select的国家来喂养城市。 我做了编程,但不知道如何将JSON数据放入select框。 我尝试了几种使用jQuery的方法,但都没有成功。

我得到的回应(如果需要,我可以以不同的方式进行格式化):

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

但是,我怎样才能把这些数据作为选项在HTML <select></select>标签中?

我试过的代码是:

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

我也尝试使用这个教程来自动填充使用jQuery和AJAX的select框 ,但是除了用我的select“UNDEFINED”来填充我的select,我从来没有做过任何事情,即使我得到了教程build议的格式的响应。

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

为什么不只是让服务器返回名称?

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

然后使用JavaScript创build<option>元素。

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

你应该这样做:

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

干杯

给你从://site.com返回的json:

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

用这个:

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