Javascript 如何使用JSON数据填充选择框的选项?
我需要根据选择的国家为城市提供食物。我是通过编程实现的,但不知道如何将JSON数据放入选择框。我尝试了几种使用jQuery的方法,但都不管用 如果需要,我得到的回复可以采用不同的格式:Javascript 如何使用JSON数据填充选择框的选项?,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我需要根据选择的国家为城市提供食物。我是通过编程实现的,但不知道如何将JSON数据放入选择框。我尝试了几种使用jQuery的方法,但都不管用 如果需要,我得到的回复可以采用不同的格式: ["<option value='Woodland Hills'>Woodland Hills<\/option>","<option value='none'>none<\/option>","<option value='Los Angeles'>L
["<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标记中呢
我尝试的代码:
<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>
我也尝试过使用它,但除了用UNDEFINED填充select之外,它什么都没做,即使我得到的响应是教程建议的格式
<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>
你应该这样做:
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);
});
}
});
};
干杯为什么不让服务器返回名字呢
["Woodland Hills", "none", "Los Angeles", "Laguna Hills"]
然后使用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));
});
}
});
给定从返回的jsonyour://site.com:
[{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));
});
});
查看并将阵列加载到下拉列表中:
$.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);
}
});
请参见此处的详细信息:zeusstl是正确的。这对我也有用
<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));
});
});
我知道这个问题有点老,但我会使用jQuery模板和$.ajax调用:
ASPX:
<select id="mySelect" name="mySelect>
<option value="0">-select-</option>
</select>
<script id="mySelectTemplate" type="text/x-jquery-tmpl">
<option value="${CityId}">${CityName}</option>
</script>
JS:
$.ajax({
url: location.pathname + '/GetCities',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (response) {
$('#mySelectTemplate').tmpl(response.d).appendTo('#mySelect');
}
});
除上述内容外,您还需要一个web方法GetCities,该方法返回包含模板中使用的数据元素的对象列表。我经常使用实体框架,我的web方法将调用一个管理器类,该类使用linq从数据库中获取值。通过这样做,您可以将输入保存到数据库并刷新选择列表,只需在保存成功后在JS中调用databind即可。还有一件事,在附加选项之前如何清理现有选项?我发现此解决方案$'mySelect'[0]。options.length=0;除非有人知道更好的方法,否则你能找到一种简单的方法来选择其中一个选项吗?@Dennis:你可以添加所选属性。对于jQuery,我相信您会使用.prop'selected',true。谢谢您的回答。不应该是“得到”类型吗?@Pizdabol:不客气。你能检查一下我的解决方案是否被接受吗?