Jquery implements the character left and right to select effects

  • 2020-03-30 03:01:14
  • OfStack

<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Jquery Achieve character left and right selection of special effects </title> 
<style type="text/css"> 
body{font:12px/180% Arial, Helvetica, sans-serif, " The new song typeface ";} 

.selectbox{width:500px;height:220px;margin:40px auto 0 auto;} 
.selectbox div{float:left;} 
.selectbox .select-bar{padding:0 20px;} 
.selectbox .select-bar select{ 
width:150px;height:200px;border:4px #A0A0A4 outset;padding:4px; 
.selectbox .btn{width:50px; height:30px; margin-top:10px; cursor:pointer;} 

<script type="text/javascript" 
<script type="text/javascript"> 
//To the right
//Gets the selected option, deletes it, and appends it to the other party
$('#select1 option:selected').appendTo('#select2'); 

//Move to the left
$('#select2 option:selected').appendTo('#select1'); 

// all To the right
//Get all the options, delete and append to each other
$('#select1 option').appendTo('#select2'); 

// all Move to the left
$('#select2 option').appendTo('#select1'); 

//Double click on the options
$('#select1').dblclick(function(){ //Bind double click event
//Get all the options, delete and append to each other
$("option:selected",this).appendTo('#select2'); //Append to the other party

//Double click on the options
<div class="selectbox"> 
<div class="select-bar"> 
<select multiple="multiple" id="select1"> 
<option value=" Super administrator "> Super administrator </option> 
<option value=" General manager "> General manager </option> 
<option value=" Information publicist "> Information publicist </option> 
<option value=" Financial administrator "> Financial administrator </option> 
<option value=" Product manager "> Product manager </option> 
<option value=" Resource manager "> Resource manager </option> 
<option value=" The administrator "> The administrator </option> 

<div class="btn-bar"> 
<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 class="select-bar"><select multiple="multiple" id="select2"></select></div> 

Related articles: