就像标题所示,我正尝试使用jQuery,JSON和AJAX创建一个下拉菜单,尽管我熟悉我尚未实施的理论,任何建议,演示代码片段或教程将不胜感激,因为我想尽可能开始!使用jQuery,JSON和AJAX来填充下拉菜单
Thanx提前!
就像标题所示,我正尝试使用jQuery,JSON和AJAX创建一个下拉菜单,尽管我熟悉我尚未实施的理论,任何建议,演示代码片段或教程将不胜感激,因为我想尽可能开始!使用jQuery,JSON和AJAX来填充下拉菜单
Thanx提前!
你需要做的$ .getJSON调用上document.load从服务器获取JSON或在其他事件http://api.jquery.com/jQuery.getJSON/。之后,您必须遍历数据并将其附加到您的选择框。看到http://www.jsfiddle.net/Dyc9Y/1/
<select id="fillME"></select>
<button id="startFilling" value="">Start ajax</button>
$(function(){
var json = {
"0": {"title":"localjsonOPtion1", "value":"b"},
"1": {"title":"localjsonOPtion2", "value":"a"}
};
$("#startFilling").click(function(){
$.getJSON("http://localdev.myvouchercodes.co.uk/local/default/search/jsonresponse", function(data){
$("#fillME").html("");
for(key in data)
$("#fillME").append("<option value='"+json [key].value+"'>"+json[key].title+"</option>");
for(key in json)
$("#fillME").append("<option value='"+json [key].value+"'>"+json[key].title+"</option>");
});
});
});
上面的offcourse例子取决于具有以下格式的json。
{
"0": {"title":"option1", "value":"1"},
"1": {"title":"option2", "value":"2"}
}
编辑: 您还需要熟悉选择框更改事件http://api.jquery.com/change/和:选择选择,让你从选择框获取所选的选项 http://api.jquery.com/selected-selector/像$("select option:selected")
你也可以查看这个教程http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/ – 2010-08-25 09:54:15
真棒,thanx所有的信息!我会有点经历它!将回报问题或成功故事! – Odyss3us 2010-08-25 10:57:44
没问题,我会等你的回复。 – 2010-08-25 11:28:22
这应该做的伎俩:
$.getJSON("test.php", function(data){
$.each(data, function(index, text) {
$('#mySelect').append(
$('<option></option>').val(index).html(text)
);
});
});
注:test.php的应该返回一个JSON编码阵列
非常感谢,我会试一试,并向你们汇报! – Odyss3us 2010-08-25 10:58:26
你的问题太广泛,有许多未知因素。你使用什么服务器技术? – Slavo 2010-08-25 09:34:05