집 >웹 프론트엔드 >JS 튜토리얼 >jquery를 기반으로 셀렉트박스 내용을 좌우로 이동하고 코드 추가 및 삭제하는 기능을 구현합니다.sharing_jquery

jquery를 기반으로 셀렉트박스 내용을 좌우로 이동하고 코드 추가 및 삭제하는 기능을 구현합니다.sharing_jquery

WBOY원래의: 2016-05-16 15:43:041815검색

이 글의 예시에서는 선택 상자의 내용을 좌우로 이동하고 추가, 삭제하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
선택 상자의 내용을 좌우로 이동하고 추가 및 삭제하는 코드는 jquery-1.8.3.min.js를 기반으로 구현되어 있어 간단하고 실용적입니다. 콘텐츠를 왼쪽과 오른쪽으로 두 번 클릭하면 왼쪽과 오른쪽으로 이동할 수 있습니다. 다중 선택 이동을 지원하며 한 번의 클릭으로 모두 이동합니다.

작업 렌더링: > ---------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.

공유해주신 코드는 다음과 같습니다

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选择框内容左右移动添加删除代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;outline:none;}
a,img{border:0;}
body{font:12px/normal "microsoft yahei";}
.selectbox{width:500px;height:220px;margin:100px auto;}
.selectbox div{float:left;}
.selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select{width:150px;height:200px;border:1px #A0A0A4 solid;padding:4px;font-size:14px;font-family:"microsoft yahei";}
.btn-bar{}
.btn-bar p{margin-top:16px;}
.btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){ 
 //移到右边
 $('#add').click(function(){
 //先判断是否有选中
 if(!$("#select1 option").is(":selected")){  
  alert("请选择需要移动的选项")
 }
 //获取选中的选项，删除并追加给对方
 else{
  $('#select1 option:selected').appendTo('#select2');
 } 
 });
 
 //移到左边
 $('#remove').click(function(){
 //先判断是否有选中
 if(!$("#select2 option").is(":selected")){  
  alert("请选择需要移动的选项")
 }
 else{
  $('#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>
<div class="selectbox">
<div class="select-bar">
  <select multiple="multiple" id="select1">
    <option value="超级管理员">超级管理员</option>
    <option value="普通管理员">普通管理员</option>
    <option value="信息发布员">信息发布员</option>
    <option value="财务管理员">财务管理员</option>
    <option value="产品管理员">产品管理员</option>
    <option value="资源管理员">资源管理员</option>
    <option value="系统管理员">系统管理员</option>
    <option value="超级管理员">超级管理员</option>
    <option value="普通管理员">普通管理员</option>
    <option value="信息发布员">信息发布员</option>
    <option value="财务管理员">财务管理员</option>
    <option value="产品管理员">产品管理员</option>
    <option value="资源管理员">资源管理员</option>
    <option value="A5源码">A5源码</option>
  </select>
</div>

<div class="btn-bar">
  <p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
  <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
  <p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
  <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
</div>

<div class="select-bar">
  <select multiple="multiple" id="select2"></select>
</div> 
</div>
<div style="text-align:center;">
</div>
</body>
</html>

위 내용은 모두와 공유할 수 있도록 셀렉트박스 내용을 좌우로 이동하는 코드입니다.

성명：

이전 기사：jquery는 아래로 슬라이드되는 보조 탐색의 슬라이드다운 메뉴 효과를 구현합니다.다음 기사：jquery는 아래로 슬라이드되는 보조 탐색의 슬라이드다운 메뉴 효과를 구현합니다.

jquery를 기반으로 셀렉트박스 내용을 좌우로 이동하고 코드 추가 및 삭제하는 기능을 구현합니다.sharing_jquery

관련 기사