您的位置：首页 > 运维架构

[封装插件]实现多个下拉菜单select中的option移动操作

2018-02-09 14:29 507 查看 
使用JS的写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#form1{
width: 80px;
height: 150px;
display:inline;
}
#form2{
width: 80px;
height: 150px;
display:inline;
}
#select1 {
width: 80px;
height: 150px;
}

#select2{
width: 80px;
height: 150px;
}
</style>
</head>
<body>
<form action="" id="form1">
<select name="" id="select1" size="7" multiple="multiple">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
<option value="番茄">番茄</option>
<option value="葡萄">葡萄</option>
<option value="梨子">梨子</option>
<option value="核桃">核桃</option>
</select>
</form>
<button onclick="but()">>></button>
<form action="" id="form2">
<select name="" id="select2" size="7">

</select>
</form>

<!--JS脚本-->
<script>
//获取form表单对象组
var forms = document.forms;

//给button按钮赋值,一点击就调用以下方法
function but(){
//获取forms表单组内的第一个form对象
var form1 = forms[0].elements;
//获取第一个form表单元素内的select对象
var select1 = form1[0];
//获取第一个select元素内的option选项组
var options1 =select1.options;

//获取forms表单组内的第二个form对象
var form2 = forms[1].elements;
//获取第二个form对象内的select对象
var select2 = form2[0];

//创建循环,判断如果选中就执行指定代码
for(var i = 0;i < options1.length  ; i++){
//判断是否被选中
if(options1[i].selected){

//接着创建一个新的option标签对象
/*
创建option对象还有另外一种方法:
var newopt = new Option(options[i].value,options[i].value)
这是使用Option底层类的方法来创建option对象,但是以后可能会被淘汰掉
建议使用document.createElement("标签名"),这种方法创建更方便记忆,更主流
*/
var newopt = document.createElement("option");
//对这个对象的value和innerHTML赋值
newopt.value = options1[i].value;
newopt.innerHTML = options1[i].value;

//然后再把这个新创建的option对象add添加到第二个对象中去
select2.add(newopt);
//把第一个select中的删除掉.写在这个作用域内会受到删除后的索引影响
//                select1.remove(i);
//非主流方法,删除选中的option.写在这个作用域内会受到删除后的索引影响
//                options1[i].outerHTML = "";
}
}

/*
在第一个循环内删除option元素会导致两个问题
(1):如果要是把i当做删除索引来计算的话,每进行一次循环,就会删除一个元素或者多个,删除完后,循环的长度也就是原来数组的长度就会减少,那么执行删除的索引就会不够数
(2):如果把索引倒过来的话是可以解决options的长度问题,但是在存入数据的时候是倒过来存储的,也不能达到我们想要的效果,所以需要新建一个for循环,专门用于倒序号删除数据
*/
for(var j = options1.length-1;i>=0;j--){
if(options1[j].selected){
select1.remove(j);
}
}
}

</script>
</body>
</html>
使用Jquery的写法:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Jquery设置移动两个form的内容</title><!--百度在线压缩地址--><script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><style>form{display: inline;}select{width: 100px;height: 300px;}</style></head><body><!--我们想要让第一个被选择的元素移动到第二个表单中去--><form action="" id="form1"><select name="" id="select1" size="7" multiple="multiple"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="西瓜">西瓜</option><option value="番茄">番茄</option><option value="葡萄">葡萄</option><option value="梨子">梨子</option><option value="核桃">核桃</option></select></form><button id="bty">>></button><button id="btz"><<</button><button id="cpy">向右复制</button><button id="cpz">向左复制</button><form action="" id="form2" ><select name="" id="select2" size="7" multiple="multiple"></select></form><script>//把左边的选框内的数据移动到第二个选框内$("#bty").click(function(){$("#select1 option:selected").appendTo("#select2")});//把第二个选框内的数据移动到第一个选框内$("#btz").click(function(){$("#select2 option:selected").appendTo("#select1")});//把左边的选框内的数据复制到第二个选框内$("#cpy").click(function(){$("#select1 option:selected").clone().appendTo("#select2")});//把第二个选框内的数据复制到第一个选框内$("#cpz").click(function(){$("#select2 option:selected").clone().appendTo("#select1")});</script></body></html>
相比较而言,jquery实现起来更为简单,主要使用了选择 select下的option中的被选中的部分,appendTo移动函数,clone克隆函数

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航