Rumah >hujung hadapan web >tutorial js >Berdasarkan jquery, laksanakan kandungan kotak pilih untuk bergerak ke kiri dan kanan, menambah dan memadam kod sharing_jquery

Berdasarkan jquery, laksanakan kandungan kotak pilih untuk bergerak ke kiri dan kanan, menambah dan memadam kod sharing_jquery

WBOYasal: 2016-05-16 15:43:041814semak imbas

Contoh dalam artikel ini menerangkan cara mengalihkan kandungan kotak pilihan ke kiri dan kanan, menambah dan memadamkannya. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Kod untuk mengalihkan kandungan kotak pilih ke kiri dan kanan dan menambah dan memadamnya dilaksanakan berdasarkan jquery-1.8.3.min.js Ia adalah mudah dan praktikal kandungan ke kiri dan kanan. Klik dua kali pada kandungan pilihan untuk bergerak ke kiri dan ke kanan.

Penyampaian operasi: ----------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod yang dikongsi dengan anda adalah seperti berikut

<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>

Di atas adalah kod untuk mengalihkan kandungan kotak pilihan ke kiri dan kanan untuk dikongsi dengan semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jquery melaksanakan kesan menu slaid ke bawah navigasi sekunder yang meluncur ke bawah_jqueryArtikel seterusnya：jquery melaksanakan kesan menu slaid ke bawah navigasi sekunder yang meluncur ke bawah_jquery

Artikel berkaitan

Lihat lagi