用JavaScript实现类似于ListBox功能示例代码

复制代码 代码如下:

<span style="font-size:14px;">{ "Table": 

[ 

{ "Id": 3, "Type": "X", 

"Content": "党的十八大报告指出，我国人民民主的重要形式是什么？", 

"Akey": "基层民主政治制度", "Bkey": "人民代表大会制度", 

"Ckey": "多党合作制度", "Dkey": null, "NUM": 3 }, 

{ "Id": 2, "Type": "X", "Content": "藏羚羊是国家一级保护动物是（）特有动物", 

"Akey": "青藏高原", "Bkey": "新疆", 

"Ckey": "青海", "Dkey": null, "NUM": 2 }, 

{ "Id": 1, "Type": "X", "Content": "保护野生动物有很多意义，不属于其意义的是", 

"Akey": "环境效应", "Bkey": "文化价值", 

"Ckey": "观赏价值", "Dkey": null, "NUM": 1 } 

] 

}</span> 

如何对在HTML中他们进行显示，并实现编辑和删除工作，这里面涉及的json解析和数据分层显示： 

HTML显示标签： 

<ul id="msg" name="msg"> </ul> 

JavaScript解析数据并显示： 

复制代码 代码如下:

<span style="font-size:14px;"> var response = xmlHttp.responseText; 

eval("var result =" + response); 

var len = result.Table.length; 

if (len > 0) { 

var msg = ""; 

for (var i = 0; i < len; i++) { 

msg += "<li><span>" + result.Table[i].Content + "</span>"; 

msg += "<span>" + result.Table[i].Akey + "</span>"; 

msg += "<span>" + result.Table[i].Bkey + "</span>"; 

msg += "<span>" + result.Table[i].Ckey + "</span>"; 

msg += "<span>" + result.Table[i].Dkey + "</span>"; 

msg += "<a href='###' onclick=\"editSub('" + result.Table[i].Id + "')\">编辑</a>"; 

msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>删除</a>"; 

msg += "</li>"; 

} 

document.getElementById("msg").innerHTML = msg; 

}</span> 

通过editSub(id)和Delete(id) 函数可以多每条数据进行处理，实现类似于ListBox的功能。