我需要根据选择的国家/地区为城市提供食物。我以编程方式完成了它,但不知道如何将 JSON 数据放入选择框中。我尝试了几种使用 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>
我也试过用这个tutorial on auto-populating select boxes using jQuery and AJAX ,但这从来没有做任何事情,除了用“未定义”为我的选择填充我的选择,即使我得到了教程建议格式的响应。
<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"]
然后创建 <option>
使用 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));
});
}
});
关于javascript - 如何使用 JSON 数据填充选择框的选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5918144/