角色左右分配

最新推荐文章于 2020-05-16 18:15:21 发布

凯子王导

最新推荐文章于 2020-05-16 18:15:21 发布

阅读量562

点赞数

分类专栏： html jquery 文章标签： js

html 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

jquery

18 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>jquery角色左右选择框 - 站长素材</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#one{width:200px; height:180px; float:left}
#two{width:50px; height:180px; float:left}
#three{width:200px; height:180px; float:left}
.btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}
</style>
<script type="text/javascript">
//下拉框交换JQuery
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项，删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右边
    $('#add_all').click(function() {
        //获取全部的选项,删除并追加给对方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左边
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //双击选项
    $('#select1').dblclick(function(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo('#select2'); //追加给对方
    });
    //双击选项
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});

</script>
</head>
<body>
<br />
<br />
<table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab">
  <tr>
    <th>　</th>
    <td><div>
        <div>
          <select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; ">
            <option value="超级管理员">超级管理员</option>
            <option value="普通管理员">普通管理员</option>
            <option value="信息发布员">信息发布员</option>
            <option value="财务管理员">财务管理员</option>
            <option value="产品管理员">产品管理员</option>
            <option value="资源管理员">资源管理员</option>
            <option value="管理员">管理员</option>
          </select>
        </div>
        <div style="float:left"> <span id="add">
          <input type="button" class="btn" value=">"/>
          </span><br />
          <span id="add_all">
          <input type="button" class="btn" value=">>"/>
          </span> <br />
          <span id="remove">
          <input type="button" class="btn" value="<"/>
          </span><br />
          <span id="remove_all">
          <input type="button" class="btn" value="<<"/>
          </span> </div>
        <div>
          <select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;">
          </select>
        </div>
      </div></td>
  </tr>
</table>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.不支持Safari浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>

下面是select 动态加载和获得选取的值

function(data){
				var select1 =document.getElementById("select1"); 
				for(var i=0;i<data.channelTypes.length;i++){
					var opt = document.createElement ("option");
				    opt.value = data.channelTypes[i].id;
				    opt.innerText = data.channelTypes[i].name;
				    select1.appendChild (opt);
				}
				
			}

获取选中的值

var select1='';
		$('#select1 option:selected').each(function(){
			select1+=($(this).val()+',');
		});

另一种方法赋值

$("#select1").val('');
		for(var i=0;i<select1.split(",").length;i++){
			$("#select1 option[value='"+select1.split(",")[i]+"']").prop("selected",true);
		}

凯子王导

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
角色左右分配

jquery角色左右选择框 - 站长素材#one{width:200px; height:180px; float:left}#two{width:50px; height:180px; float:left}#three{width:200px; height:180px; float:left}.btn{width:50px; height:30px; margin-top:10p
复制链接

扫一扫