Home > Developer > JavaScript
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Jquery selects special effects on the left and right sides of a role </title>
<Style type = "text/css">
* {Margin: 0; padding: 0; list-style-type: none ;}
A, img {border: 0 ;}
Body {font: 12px/180% Arial, Helvetica, sans-serif, "";}
. 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 ;}
</Style>
<Script type = "text/javascript"
Src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
// Move to the right
$ ('# Add'). click (function (){
// Obtain the selected option, delete it, and append it to the other party
$ ('# Select1 option: selected'). appendTo (' # select2 ');
});
// Move to the left
$ ('# Delete'). click (function (){
$ ('# Select2 option: selected'). appendTo (' # select1 ');
});
// Move all to the right
$ ('# Add_all'). click (function (){
// Obtain all the options, delete them, and append them to the other party.
$ ('# Select1 option'). appendTo ('# select2 ');
});
// Move all to the left
$ ('# Remove_all'). click (function (){
$ ('# Select2 option'). appendTo ('# select1 ');
});
// Double-click
$ ('# Select1'). dblclick (function () {// bind double-click event
// Obtain all the options, delete them, and append them to the other party.
$ ("Option: selected", this). appendTo ('# select2'); // append it to the other party
});
// Double-click
$ ('# 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 = "Super administrator"> super administrator </option>
<Option value = "General Administrator"> General Administrator </option>
<Option value = "Information publisher"> information publisher </option>
<Option value = "Financial administrator"> Financial administrator </option>
<Option value = "Product administrator"> product administrator </option>
<Option value = "resource administrator"> resource administrator </option>
<Option value = "Administrator"> administrator </option>
</Select>
</Div>
<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>
<Div class = "select-bar"> <select multiple = "multiple" id = "select2"> </select> </div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
