您的位置：首页 > Web前端 > JQuery

jquery select 左右移动

2016-01-31 13:34 597 查看 
<%@ 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(1);
$("#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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航