用JavaScript實現類似于ListBox功能示例代碼

2019-11-20 20:58:14

字體：大中小

來源：轉載

供稿：網友

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> 