我知道对此有很多疑问,但是我仍然不确定该怎么做。
我有一个名为“ CuisineForm”的HTML表单,在用户选择了美食类型之后,AJAX将该表单发送到服务器。AJAX调用工作正常,并且服务器以JSON响应进行响应,该响应包含此特定美食的所有服务时间。这些服务时间分为早餐,午餐和晚餐。
这些时间需要以相同的形式填充到3个单独的下拉菜单中。但我真的不知道如何处理JSON结果以填充表单中的3个下拉列表。
这是来自PHP服务器端脚本的JSON响应。请注意,这是在PHP脚本中使用“ echo json_encode()”生成的。
{"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch":[{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]}
这是我的$ .post代码。
$.post( "gettimeslots", $( "#CuisineForm" ).serialize(), function() {
alert( "success" );
})
.done(function(data) {
// Not sure what code to write here to populate dropdown
})
.fail(function() {
alert( "There was a problem getting the dropdown values!" );
})
.always(function() {
alert( "always" );
});
这是我要填充的下拉菜单
<select name="breakfasttimes" id="breakfasttimes"></select>
<select name="lunchtimes" id="lunchtimes"></select>
<select name="dinnertimes" id="dinnertimes"></select>
大多数实现倾向于使用$ .getJSON。但是如上所示,我改用$ .post。请告诉我是否应该使用$ .getJSON。
有人可以提供一些指针或代码建议吗?
谢谢凯文
这是一个包含完整答案的小提琴
HTML:
<select name="breakfast" id="breakfast"></select>
<select name="lunch" id="lunch"></select>
<select name="dinner" id="dinner"></select>
JS:
var data = {"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch": [{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]};
// Put this code inside of the "done callback"
var $elements = $('#breakfast, #lunch, #dinner');
$.each(data, function (dataKey, dataVal) {
$elements.each(function(domElKey, domElVal){
if (dataKey === domElVal.id) {
$.each(dataVal, function(timeKey,timeVal){
$.each(timeVal,function(timePropKey, timePropVal){
$(domElVal).append("<option>"+timePropVal+"</option>");
});
})
}
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句