例如有以下2个select设置为多选,今天我们要实现的2个select之间的内容相互移动,并且是级联的移动。
<td align="center" width="35%">
<select name="menuUnUsable" multiple="multiple" size="18" style="width:240px;" id="notIsUserMenu">
</select>
</td>
<td align="center" width="35%">
<select name="menuUsable" multiple="multiple" size="18" style="width:240px;" id="isUserMenu">
</select>
</td>
//双击可用菜单时,可用菜单变成不可用菜单
$("select[name=menuUsable]").dblclick(function() {
moveUseable();
});
//双击不可用的菜单时,不可用的菜单变成可用的菜单
$("select[name=menuUnUsable]").dblclick(function() {
moveUnUseable();
});
当然要实现级联移动,必须对select中的内容做些处理,我的方法是:从数据库中取出需要的name_和id_字段时,对name_字段做了些处理(子对象的name_字段=父对象的name_+“-”+子对象的name_),经过这么处理页面上就很容易区分出select内容之间的父子关系。以下是js处理的select内容之间的移动并且实现了级联:
var separator = "-";
//移动不可用菜单
function moveUnUseable(){
var e1 = document.getElementById("notIsUserMenu");
var e2 = document.getElementById("isUserMenu");
var array = new Array();
for(var i=0;i<e1.options.length;i++){
//得到选中元素
if(e1.options[i].selected){
var option = e1.options[i];
//添加本身
array.push(option);
//若当前元素为子菜单
if(option.text.indexOf(separator)!=-1){
//循环找出它的父菜单
for(var j=0;j<e1.options.length;j++){
var temp = e1.options[j];
if((temp.text.indexOf(separator)==-1) && (option.text.indexOf(temp.text)!=-1)){
//添加父菜单
array.push(temp);
}
}
}
}
}
//去除数组中的重复项
var list = array;
for(var i=0;i<array.length;i++){
for(var j=i+1;j<array.length;j++)
{
if(array[i].value==array[j].value)
{
list.splice(j,1);
}
}
}
//移动选项
for(var i=0;i<list.length;i++){
e2.options.add(new Option(list[i].text,list[i].value));
e1.remove(list[i].index);
}
}
//移动可用菜单
function moveUseable(){
var e1 = document.getElementById("isUserMenu");
var e2 = document.getElementById("notIsUserMenu");
var array = [];
for(var i=0;i<e1.options.length;i++){
//得到选中元素
if(e1.options[i].selected){
var option = e1.options[i];
//若当前元素为父菜单
if(option.text.indexOf(separator)==-1){
//循环找出它的子菜单
for(var j=0;j<e1.options.length;j++){
var temp = e1.options[j];
if((temp.text.indexOf(separator)!=-1) && (temp.text.indexOf(option.text)!=-1)){
//添加子菜单
array.push(temp);
}
}
}
//添加本身
array.push(option);
}
}
//去除数组中的重复项
var list = array;
for(var i=0;i<array.length;i++){
for(var j=i+1;j<array.length;j++)
{
if(array[i].value==array[j].value)
{
list.splice(j,1);
}
}
}
//移动选项
for(var i=0;i<array.length;i++){
e2.options.add(new Option(array[i].text,array[i].value));
e1.remove(array[i].index);
}
}
分享到:
相关推荐
实现两个select之间内容的互换实测通过,很好用
js 实现 实现两个select的同步! 值得下载看看!资源免费,大家分享!!
NULL 博文链接:https://yuxingxing1988.iteye.com/blog/1090351
js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效
Js实现两个Select标签中的选项之间的移动
两个 select 下拉框中的数据相互移动
本人写的一个html页面,用js实现从数组读数据自动生成select控件
使用jquery技术实现 两个select之间option的转移操作,支持全选、单选、删除操作,代码简单,功能强大,拿过来就能用哦!内附效果截图
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
select选择框内容左右移动源码,请大家参考。
本篇文章主要是对两个select多选模式的选项相互移动示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
主要介绍了JavaScript实现两个select下拉框选项左移右移功能,js实现下拉框元素互相移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
从一个select 选中数据后移动到另一个select框中
主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下
原生select实现多选功能
<div id='Cont_2'>第二条新闻内容 CSS样式写 #info_box div { display:none; } js函数: function ShowInfo(Id){ document.getElementById("Cont_"+Id).style.display="block" } 大概就是这样了,手写的,可能有误 ...
select2.min.js插件!!!=
包含jquery.editable-select.min.js和jquery.editable-select.js,demo可以实现select编辑。
JQ JS javascript 多选 多选下拉框 select bootstrap-select