展会信息港展会大全

用JavaScript实现类似于ListBox功能示例代码
来源:互联网   发布日期:2016-01-27 15:37:32   浏览:901次  

导读:这篇文章主要介绍了用JavaScript实现类似于ListBox功能,需要的朋友可以参考下JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一 ...

这篇文章主要介绍了用JavaScript实现类似于ListBox功能,需要的朋友可以参考下

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

代码如下:

<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的功能。

赞助本站

人工智能实验室

相关热词: ListBox 功能 JavaScript

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港