教程集 > 脚本编程 > javascript > 正文 Javascript select值左右增加删除效果

Javascript select值左右增加删除效果

发布时间：2016-11-29 编辑：jiaochengji.com

教程集为您提供Javascript select值左右增加删除效果等资源，欢迎您收藏本站，我们将为您提供最新的Javascript select值左右增加删除效果资源

一个不错的Javascript select值左右增加删除效果，很多网站有很多分类了可以让用户自己增加或删除不要的分类，下面我来给大家介绍这种效果。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <script language="javascript"> function $(str){ return document.getElementById(str); } function removeOption(select,index) { $(select).options[index]=null; //$(select).remove(index); } function appendOptionLast(select,text,value) { var elOptNew = document.createElement('option'); elOptNew.text = text; elOptNew.value =value; var elSel = document.getElementById(select); try { elSel.add(elOptNew, null); // 未能在 IE 中运行 } catch(ex) { elSel.add(elOptNew); //只适合于 IE } } function allToRight(){ var left=$("select_left"); for (i = left.length - 1; i>=0; i--) { try{ appendOptionLast("select_right",left.options[i].text,left.options[i].value); }catch(e){} //left.remove(i); removeOption("select_left",i); } } function selectedToRight(){ var left=$("select_left"); for (i = left.length - 1; i>=0; i--) { if(left.options[i].selected){ try{ appendOptionLast("select_right",left.options[i].text,left.options[i].value); }catch(e){} //left.remove(i); removeOption("select_left",i); } } } function selectedToLeft(){ var right=$("select_right"); for (i = right.length - 1; i>=0; i--) { if(right.options[i].selected){ try{ appendOptionLast("select_left",right.options[i].text,right.options[i].value); }catch(e){} //right.remove(i); removeOption("select_right",i); } } } function allToLeft(){ var right=$("select_right"); for (i = right.length - 1; i>=0; i--) { try{ appendOptionLast("select_left",right.options[i].text,right.options[i].value); }catch(e){} //right.remove(i); removeOption("select_right",i); } } function getRightValue() //取得右边select的值 { var right=$("select_right"); var str=""; for (i = right.length - 1; i>=0; i--) { str =right.options[i].value ";"; } alert(str); } </script> 一个select表单移处数据的效果，非常好用。 <table> <tr><td> <select id="select_left" size="10" multiple="multiple" style="width:150px"> <option value="23562356856" selected="selected">张老大 23562356856</option> <option value="23623568562">刘老四 23623568562</option> <option value="23635254345">令胡冲 23623568562</option> <option value="13714715608">杨庆荣 13714715608</option> </select> </td> <td> >" onclick="allToRight();">
" onclick="selectedToRight();">

</td> <td> <select id="select_right" size="10" multiple="multiple" style="width:150px"> </select> </td> </tr> </table> </textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
Javascript select值左右增加删除效果
 jquery中select组件的使用方法
 mysql 增删改查语句基本用法
 js移动(增加删除)select option的实现代码
 jQuery实现下拉框左右选择的简单实例
 jQuery 下拉框左右选择实现代码
 jQuery在html有效在jsp无效的原因及解决方法
 数据结构和算法(Golang实现)(29)查找算法-2-3树和左倾红黑树
 jQuery取得select选择的文本与值的示例
 jQuery标签页插件 jerichoTab

上一篇：js实现图片文字滑动效果下一篇：兼容ie,ff浏览屏蔽右键菜单

[关闭]

Javascript select值左右增加删除效果

最近更新

浏览排行