JS——下拉列表

下来列表是开发过程中常见到的，今天就来总结一下原生的js是如何操作select的

1、动态创建select

function createSelect(){ 
var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
} 

2、添加选项option

function addOption(){ 
var obj=document.getElementById('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
} 

3、删除一个option

function removeOne(){ 
var obj=document.getElementById('mySelect'); 
//index,要删除选项的序号，这里取当前选中选项的序号 
var index=obj.selectedIndex; 
obj.options.remove(index); 
} 

 

4、删除所有的option

function removeAll(){ 
var obj=document.getElementById('mySelect'); 
obj.options.length=0; 
//obj.innerHTML="";   //这种方式也可以的
} 

5、获取option的text

var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
var val = obj.options[index].text; 

 

6、获取option的value

var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
var val = obj.options[index].value; 

7、修改option

var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值"); 

8、删除select

function removeSelect(){ 
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
} 

实例：

自定义的二级级联列表：

<script>
        var proArr = ["北京", "上海", "广东", "重庆", "天津", "河北"];
        var cityArr = new Array(
            new Array("海淀","丰台","东城","西城","中关村"),
            new Array("黄埔","浦东","浦西"),
            new Array("广州","深圳","佛山"),
            new Array("九龙坡","其他"),
            new Array("河西","河东","北辰"),
            new Array("石家庄","承德","张家口","邯郸")
            );
       
        function GetCity(pro, city) {
            document.write('<select name="proSel" onchange="Change(this);">');
            document.write('<option value=0>请选择省份</option>');
            for (var i = 0; i < proArr.length; i++) {
                document.write('<option value="' + (i + 1) + '">' + proArr[i] + '</option>');
            }
            document.write('</select>');

            document.write('<select name="citySel">');
            document.write('<option value=0>请选择城市</option>');
            document.write('</select>');
        }

        function Change(obj)
        {
            var city = document.getElementsByName("citySel")[0];
            var index = obj.selectedIndex - 1;
            city.innerHTML = ""; //清空原来的城市列表的数据
            //city.options.length = 0;  //清楚所有的options

            for (var i = 0; i < cityArr[index].length; i++)
            {
                var op = document.createElement("option");
                op.value = i;
                op.text = cityArr[index][i];
                city.appendChild(op);
            }
        }
        GetCity();
    </script>