用JavaScript实现类似于ListBox功能示例代码_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 16:56:10

原创

1292人浏览过

JavaScript对于多项数据的请求和处理过程中，如何实现常常困扰很多程序员，如何进行动态编辑和删除而不影响其他的数据项，今天介绍一种方法，可供借鉴，例如通过XmlRequest请求到如下数据:

DirCMS内容管理系统6.0

DirCMS内容管理系统，是国内自主研发的一款功能强大而又不失小巧简洁的由PHP+Mysql架构的内容管理系统。DirCMS代码全部开源，便于使用者二次开发或定制；并采用简洁的模板标签技术，使制作模板更加容易，一般情况下，用DirCMS架构一个企业站只需半天时间即可，真正实现功能的简洁，实用，强大，灵活。可广泛应用于架构各类门户站，下载站，企业站，工作室等站点。

查看详情

复制代码代码如下:

 
{ "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 } 
] 
} 

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

HTML显示标签：

JavaScript解析数据并显示：

复制代码代码如下:

var response = xmlHttp.responseText;
eval("var result =" + response);
var len = result.Table.length;
if (len > 0) {
var msg = "";
for (var i = 0; i msg += "

" + result.Table[i].Content + "";
msg += "" + result.Table[i].Akey + "";
msg += "" + result.Table[i].Bkey + "";
msg += "" + result.Table[i].Ckey + "";
msg += "" + result.Table[i].Dkey + "";
msg += "编辑";
msg += " 删除";
msg += "

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

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