正文
jquery select 左右移动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication9.WebForm1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="jquery.ui.all.css" rel="stylesheet" />
<link href="jquery.ui.theme.css" rel="stylesheet" />
<link href="jquery-ui.css" rel="stylesheet" />
<link href="ui.jqgrid1.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.1.min.js"></script>
<script src="Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function moveToRight(select1, select2)//把选中的移动到右边 sleect1和sleect2分别是下拉列表框的ID
{
alert();
$("#mask").show();
$('#' + select1 + ' option:selected').each(function () {
$("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select2 + "");
$(this).remove();
});
$("#mask").hide();
}
function moveAllToRight(select1, select2)//把所有的移动到右边
{
$('#' + select1 + ' option').each(function () {
$("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select2 + "");
$(this).remove();
});
}
function moveToLeft(select1, select2)//把选中的移动到左边
{
$('#' + select2 + ' option:selected').each(function () {
$("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select1 + "");
$(this).remove();
});
}
function moveAllToLeft(select1, select2)//把所有的移动到左边
{
$('#' + select2 + ' option').each(function () {
$("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select1 + "");
$(this).remove();
});
} $.fn.GetPostData = function () {
alert("ssss");
} $(function () { $("#btn").on("click", function () {
$("#tabs").GetPostData();
}) $('#sel2').bind('dblclick', function (event) {//给下拉框绑定双击事件
moveToRight('sel2', 'sel3'); });
$('#sel3').bind('dblclick', function () {
moveToLeft('sel2', 'sel3');
});
}); </script>
</head>
<body>
<form id="form1" runat="server">
<%-- 自定义遮罩--%>
<div class="window-mask" id="mask" style="width: 100%; height:1000px; display: none; z-index: 9000;background-color:red;"></div>
<select id="sel2" multiple="multiple" style="width: 100px;">
<option selected="selected">1.1</option>
<option>1.2</option>
<option>1.3</option>
</select>
<select id="sel3" multiple="multiple" style="width: 100px;"></select> </form>
</body>
</html>
