DOM 创建一个下拉列表 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找表单控件</title>
<script type="text/javascript" src="dom7.js"></script>
</head>

<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="clear1()">
</body>
</html>
// JavaScript Document
//创建下拉菜单
var sel;
function create(){
    //创建下拉菜单元素节点
     sel=document.createElement("select");
    //给sel属性节点赋值
    sel.id="myselect";
    sel.size=3;
    //获取body元素节点
    var body=document.getElementsByTagName("body")[0];
    //将下拉菜单元素节点添加至body标签
    body.appendChild(sel);
    //创建选项节点
    for(var i=0;i<5;i++){
        //格式：选项节点=new Option(文本节点，value属性节点)
        var op=new Option("选项"+i,i);
        //将选项添加到select标签
        sel.appendChild(op);
    }
}
//一条一条删除option
function del(){
    //获取最后一个option元素的下标
    var index=sel.options.length-1;
    //删除最后一个元素
    sel.remove(index);
}
//一次性清空option
function clear1(){
    //让option数组长度为0
    sel.options.length=0;
}
new Option(text,value,defaultSelected,selected)
该构造器有4个参数，说明如下：
text    该选项的文本、即该选项所呈现的“内容”
value    选中该选项的值
defaultSelected    设置默认是否显示该选项
selected    设置该选项当前是否被选中
提示：并不是每次构造都需指明4个参数，可以指明一个或者两个都可以，假如一个的话指明的是text，假如二个的话，第一个参数是text，第二个参数是value。
添加创建好的选项至列表框或下拉菜单的方式
直接为<select>的的指定选项赋值
列表框或下拉菜单对象.options[i]=创建好的option对象
删除列表框、下拉菜单的选项的方法
1.    直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
2.    直接将指定选项赋值为null
列表框或下拉菜单对象.remove(index)或对象.options[index]=null

 

posted @ 2020-08-25 08:15  soda001  阅读(419)  评论(0)    收藏  举报