木子屋 Dnawo's BLOG

JS操控select函数

👤 dnawo 📅 2006-12-21 👁 7709 👍 0 💬 0 🔄 木子屋
<select id="list1" name="list1" multiple size="6">
	<option value="http://www.mzwu.com/">木子屋</option>
	<option value="http://www.163.com/">网易</option>
	<option value="http://www.sohu.com/">搜狐</option>
	<option value="http://www.sina.com.cn/">新浪</option>
</select>
<select id="list2" name="list2" multiple size="6">
	<option value="http://www.baidu.com/">百度</option>
	<option value="http://www.google.com/">Google</option>
</select>

操作函数:

//显示列表一全部选项
function GetAllItem()
{
	var temp = "";
	var obj = document.getElementById("list1");
	for(var i=0;i<obj.options.length;i++)
	{
		temp += obj.options[i].text + "," + obj.options[i].value + "\r\n";
	}
	alert(temp);
}

//获取列表一第一项选择项
function GetFirstSelectedItem()
{
	var obj = document.getElementById("list1");
	if(obj.selectedIndex!=-1)
	{
		alert(obj.options[obj.selectedIndex].text + "," + obj.options[obj.selectedIndex].value);
	}
}

//获取列表一全部选择项
function GetAllSelectedItem()
{
	var temp = "";
	var obj = document.getElementById("list1");
	if(obj.selectedIndex!=-1)
	{
		for(var i=0;i<obj.options.length;i++)
		{
			if(obj.options[i].selected)
				temp += obj.options[i].text + "," + obj.options[i].value + "\r\n";
		}
	}
	alert(temp);
}

//列表一第一项选择项移到列表二末尾
function MoveToEnd()
{
	var obj = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	if(obj.selectedIndex!=-1)
	{
		var option = new Option(obj.options[obj.selectedIndex].text,obj.options[obj.selectedIndex].value);
		obj2.options[obj2.options.length] = option;
		//obj2.add(option);
		obj.options[obj.selectedIndex] = null;
	}
}

//列表一全部选择项移到列表二
function MoveToFirst()
{
	var obj = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	if(obj.selectedIndex!=-1)
	{
		//小技巧:从下到上进行移动
		for(var i=obj.options.length-1;i>=0;i--)
		{
			if(obj.options[i].selected)
			{
				var option = new Option(obj.options[i].text,obj.options[i].value);
				obj2.add(option);
				obj.options[i] = null;
			}
		}
	}
}

//清空列表二
function Clear()
{
	document.getElementById("list2").options.length = 0;
}

评论(0)

暂无评论。

计算题
评论需审核通过后显示
← 上一篇 JavaScript 对象与数组参考大全 下一篇 → 减少工作量:从模板和库说起