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

 這篇文章主要介紹了用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的功能。