- 使用DOM及诶动态生成select下拉列表
- 用数组保存下拉列表的数据内容
- 使用一个按钮控制加载下拉列表中的内容
- 原html代码
<html>
<head>
<title>动态生成下拉列表数据</title>
<meta charset="utf-8"/>
</head>
<body>
选择你所在的城市<select id="city" value="city"><option value="0">========请选择你所在的城市=========</potion></select>
<input type="button" value="加载下拉列表数据" />
</body>
</html>
- 现在想要使用javascript代码实现点击下拉列表数据按钮之后,出现下拉列表数据
<script type="text/javascript">
window.onload = function(){
var butEle = document.getElementById("but");
butEle.addEventListener("click",function(){loadData();},false);
}
function loadData(){
var cityValue = new Array("北京","上海","广州","杭州","无锡");
var cityIds = new Array(1,2,3,4,5);
var selectEle = document.getElementById("city");
for(var x = 0; x < cityIds.length; x++){
var optEle = document.createElement("option");
optEle.setAttribute("id",cityIds[x]);
optEle.appendChild(document.createTextNode(cityValue[x]));
selectEle.appendChild(optEle);
}
}
</script>
- 此时会出现一个问题,就是如果连续点击"加载下拉列表数据"的按钮,会出现一直累加下拉列表项的问题,
- 要解决这个问题可以,在每次动态生成"option"元素是,将select元素的长度设置为1
var selectEle = document.getElementById("city");
selectEle.length = 1;
- 还有一种方式是定一个删除"option"元素的方法,在动态生成option元素时,删除原来的option
- 删除原来的下拉列表的option
function deleteOption(selectEle){
var optionEles = document.getElementsByTagName("option");
var len = optionEles.length;
for(var x = 0 ; x < len; x ++){
if(optionEles[1] != undefined){
selectEle.removeChild(optionEles[1]);
}
}
}
- 在动态生成下拉列表的时候删除原有的option元素
window.onload = function(){
var butEle = document.getElementById("but");
butEle.addEventListener("click",function(){loadData();},false);
}
function loadData(){
var cityValue = new Array("北京","上海","广州","杭州","无锡");
var cityIds = new Array(1,2,3,4,5);
var selectEle = document.getElementById("city");
deleteOption(selectEle);
for(var x = 0; x < cityIds.length; x++){
var optEle = document.createElement("option");
optEle.setAttribute("id",cityIds[x]);
optEle.appendChild(document.createTextNode(cityValue[x]));
selectEle.appendChild(optEle);
}
}