【发布时间】：2016-12-14 03:29:58
【问题描述】：
功能
将下拉菜单中的对象填充到下拉菜单中。 Json 文件存储在 root/ajax/.json 中，而工作文件存储在 root/.html 中。
问题：
JSOn 文件中没有任何对象填充下拉菜单。我试图 console.log(data) 但它没有返回任何东西。我不知道调用 JSON 文件以填充下拉菜单失败的原因。
我尝试了 2 种方法来调用 JSON 文件：
#dropDownShops_1 {
position: absolute;
width: 330px;
height: 59px;
z-index: 90;
top: 340px;
left: 350px;
outline: 0;
border: 0;
}
#dropDownShops_2 {
position: absolute;
width: 330px;
height: 59px;
z-index: 90;
top: 535px;
left: 350px;
outline: 0;
border: 0;
}
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid yellow;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../lib/image/Dropdown_arrow.png") 100% / 100% no-repeat #eee;
}<form>
<!-- DropDown Menu to choose Participating Outlet -->
<select id="dropDownShops_1">
<option value="None" selected="Selected">Please Select Shops ...</option>
</select>
<select id="dropDownShops_2">
<option value="None" selected="Selected">Please Select Shops ...</option>
</select>
</form>JSON 文件：
有 400 个项目，但为简单起见，我将其缩小到只有 3 个项目：
{
"Shops": [
{
"ShopName": "7-ven",
"ShopID": "7-ven123",
"Shoplocation": "#02-31"
}, {
"ShopName": "8Tarstries",
"ShopID": "8Tarstries123",
"Shoplocation": "#B2-K4"
}, {
"ShopName": "A|hange",
"ShopID": "A|hange123",
"Shoplocation": "#01-202"
}]
}
方法 1：
我尝试使用此方法，但下拉菜单中没有显示任何内容，console.log 中也没有显示任何内容
//get a reference to the select element
var $select = $("#dropDownShops_1, #dropDownShops_2");
/*******************************************************
*FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE*
*******************************************************/
$(function() {
//request the JSON data and parse into the select element
$.getJSON('ajax/shops.json', function(data) {
$select.html('');
$.each(data.Shops, function(key, value) {
console.log("value:" + value);
//iterate over the data and append a select option
$select.append("<option >" + value.ShopName + "</option>");
});
});
});方法 2：
我尝试使用此方法，但它显示“无可用”，因为它会直接调用错误：函数（）：
//get a reference to the select element
var $select = $("#dropDownShops_1, #dropDownShops_2");
/*******************************************************
*FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE*
*******************************************************/
$.ajax({
url: "ajax/shops.json",
dataType: 'json',
success: function(data) {
console.log(data);
$select.html('');
$.each(data.Shops, function(key, value) {
console.log("value:" + value);
//iterate over the data and append a select option
$select.append("<option >" + value.ShopName + "</option>");
});
},
error:function(){
//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});
【问题讨论】：
-
你在$( document ).ready()里面使用jquery吗
-
@bansi 我认为这并不重要
-
当
error回调被调用时，实际的错误是什么？ -
@nnnnnn 错误回调时，下拉菜单中显示“none available”，而不是“Please Select Shops ...”
-
是的，因为这就是您的错误“处理”代码所做的。但实际的错误是什么？ jQuery 将错误的详细信息传递给您的函数，但您没有对这些信息做任何事情。浏览器的开发工具网络选项卡中是否有任何错误？
标签： javascript jquery html json