我如何使用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)); }); });