动态创设selectjs 操作select和option

2013-02-24

动态创建selectjs 操作select和optionfunction createSelect(){var mySelect document.createElement(s

动态创建selectjs 操作select和option
function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); }

2.添加选项option

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

3.删除所有选项option

function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; }

4.删除一个选项option

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

5.获得选项option的值

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

6.获得选项option的文本

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

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); }

整个实例的完整代码如下：

><html>

function $(id){

return document.getElementById(id)}

function show(){

var selectObj=$("area")var myOption=document.createElement("option")

myOption.setAttribute("value","10")myOption.appendChild(document.createTextNode("上海"))

var myOption1=document.createElement("option")myOption1.setAttribute("value","100")

myOption1.appendChild(document.createTextNode("南京"))selectObj.appendChild(myOption)

selectObj.appendChild(myOption1)}

function choice(){

var index=$("area").selectedIndex;var val=$("area").options[index].getAttribute("value")

if(val==10){

var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];

remobj.removeNode(true)var sh=document.createElement("select")

sh.add(new Option("浦东新区","101"))sh.add(new Option("黄浦区","102"))

sh.add(new Option("徐汇区","103"))sh.add(new Option("普陀区","104"))

$("context").appendChild(sh)}

if(val==100){

var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];

remobj.removeNode(true)var nj=document.createElement("select")

nj.add(new Option("玄武区","201"))nj.add(new Option("白下区","202"))

nj.add(new Option("下关区","203"))nj.add(new Option("栖霞区","204"))

$("context").appendChild(nj)}

}function calc()

{var x=$("context").childNodes.length-1;

alert(x)}

function remove(){

var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];

remobj.removeNode(true)}

</script><body>

</select></div>

</html>

热点排行

JavaScript

动态创设selectjs 操作select和option