表单-选择框各种操作练习

假设HTML部分代码，如下：

<select name="select" id="">
    <option value="上海V">上海T</option>
    <option value="北京V">北京T</option>
    <option value="河南V">河南T</option>
</select>

Javascript代码，如下：

<script>
    window.οnlοad=function(){
        var form=document.getElementById('myform');
	var select=form.elements['select'];
	
	//当选择项改变时，选择哪个就弹出相应的选择项的值 代码如下
	select.οnchange=function(){
	    //this.selectedIndex 表示选择项的索引值
	    alert(select.options[this.selectedIndex].text);
	}
	
	//添加一个option选项
	//方法一  标准DOM
	var option=document.createElement('option');
	select.appendChild(option);

	var val=document.createTextNode('上海');
	option.appendChild(val);

	option.setAttribute('value','上海');
	
	//方法二 Option构造函数法
	var option=new Option('上海22','上海1');
	select.add(option,undefined);   //undefined 这样写是兼容IE后的最终写法。
	
	
	//移除一个option选项
	
	select .remove(2);
	
	//将option选项从一个select 移动到另外一个select中
	//假设另外一个option的name为city  实现代码如下：
	
	select.multiple=true;

	var city=form.elements['city'];

	city.multiple=true;

	select.οnclick=function(){
	city.appendChild(select.options[select.selectedIndex]);
	}
    }
</script>

本文来自：http://zhaoqian.sinaapp.com/archive/7.html