本博客展示了HTML和JavaScript结合实现的选择框交互功能，包括双击移动元素的特性，为网页动态交互提供了实例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select name="nameselect" id ="from" size="5" ondblclick="moveItem('from','to')">
<option value="sfd">dxs</option>
<option value="sf">fsd</option>
<option value="sf">ds</option>
<option value="ewsd">dscx</option>
<option value="s">fd</option>
<option value="sfd">dxs</option>
<option value="sf">fsd</option>
<option value="sf">ds</option>
<option value="ewsd">dscx</option>
<option value="s">fd</option>
<option value="sfd">dxs</option>
<option value="sf">fsd</option>
<option value="sf">ds</option>
<option value="ewsd">dscx</option>
<option value="s">fd</option>
<option value="sfd">dxs</option>
<option value="sf">fsd</option>
<option value="sf">ds</option>
<option value="ewsd">dscx</option>
<option value="s">fd</option>
</select>
<input type="button" onclick="moveItem('from','to')" value=">" />
<select name="sfd" size="5" id="to" ondblclick="moveItem('to','from')" >
<option value="sfd">dxs</option>
</select>
<script type="text/javascript" >
function moveItem(from,to)
{
var toObj = document.getElementById(to);
var fromObj = document.getElementById(from);
var len = fromObj.options.length;
for (var i=0;i<len;i++)
{
var option = fromObj.options[i];
if (option.selected==true)
{
toObj.options.add(new Option(option.text,option.value));
fromObj.options.remove(i);
}
}
}
</script>
</body>
</html>
扫一扫
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
