移动、交换SELECT内容

最新推荐文章于 2020-12-30 09:43:54 发布

原创最新推荐文章于 2020-12-30 09:43:54 发布 · 781 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#button #function #javascript #null #border

ASP_开发类专栏收录该内容

33 篇文章

订阅专栏

该博客主要介绍了使用JavaScript实现SELECT内容的移动和交换功能。通过定义移动函数MoveOptions和MoveOptions2，可将选中项在两个SELECT框间移动；定义交换函数SwapOptions，能实现SELECT框内选项的上下交换，还为按钮和SELECT框添加了相应事件。

<title>移动、交换SELECT内容</title>
<style type="text/css">

</style>
<script>var createDate = "2003.8.23";</script>
<script language="javascript" defer>
//添加事件
fromSel.attachEvent("ondblclick",new Function("MoveOptions(fromSel,toSel)"))
toSel.attachEvent("ondblclick",new Function("MoveOptions2(toSel,fromSel)"))
LeftButton.attachEvent("onmouseup",new Function("MoveOptions(fromSel,toSel)"))
RightButton.attachEvent("onmouseup",new Function("MoveOptions2(toSel,fromSel)"))
//移动函数
function MoveOptions(oFrom,oTo) {
for (var i=1;i<oFrom.length;i++) {
  if (oFrom.options[i].selected) {
   oTo.options[oTo.length] = new Option(oFrom.options[i].text,oFrom.options[i].value);
   //oFrom.options[i--] = null;
   if (event.type=="dblclick") return;
  }
}
}
function MoveOptions2(oFrom,oTo){
for (var i=1;i<oFrom.length;i++){
  if (oFrom.options[i].selected){
   //oFrom.options[oTo.length] = new option(oFrom.options[i].text,oFrom.options[i].value);
   oFrom.options[i--] = null;
   if (event.type=="dblclick") return;
  }
}
}
//交换函数
function SwapOptions(obj,direction) {
var objIndex = obj.selectedIndex;
var swapIndex=direction=="up"?objIndex-1:objIndex+1;
if ((swapIndex==obj.length&&direction=="down")||(swapIndex==-1&&direction=="up")||obj.selectedIndex==0||swapIndex<=0) return;
obj.options[objIndex].swapNode(obj.options[swapIndex]);
}
</script>
<body>
<table width="165" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<button onmouseup="SwapOptions(fromSel,'up')">5</button>
<button onmouseup="SwapOptions(fromSel,'down')">6</button>
</td></tr>
<tr><td>
<select id="fromSel" multiple size=10>
  <option>---请选择要进入的网站---</option>
  <option>CSND.net</option>
  <option>MSND.com</option>
  <option>Blueidea.com</option>
  <option>51job.com</option>
  <option>Yahoo.com</option>
  <option>Pchome.net</option>
  <option>Sina.com.cn</option>
</select>
</td></tr>
<tr><td align="center">
<button id="RightButton">7</button>
<button id="LeftButton">8</button>
</td></tr>
<tr><td>
<select id="toSel" multiple size=10>
<option>---请选择感兴趣的网站---</option>
</select>
</td></tr>
<tr><td align="right">
<button onmouseup="SwapOptions(toSel,'up')">5</button>
<button onmouseup="SwapOptions(toSel,'down')">6</button>
</td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript" SRC="createDate.js"></SCRIPT>
<br>
<SCRIPT LANGUAGE="JavaScript" SRC="list.js"></SCRIPT>