Home > Developer > JavaScript
To achieve this effect, select Add to right, add all to right, select Delete to left, and delete all to left.
Html section:
Copy codeThe Code is as follows:
<Body>
<Div class = "centent">
<Select multiple = "multiple" id = "select1" style = "width: 100px; height: 160px;">
<Option value = "1"> option 1 </option>
<Option value = "2"> option 2 </option>
<Option value = "3"> option 3 </option>
<Option value = "4"> option 4 </option>
<Option value = "5"> option 5 </option>
<Option value = "6"> option 6 </option>
<Option value = "7"> option 7 </option>
</Select>
<Div>
<Span id = "add"> select add to right> </span>
<Span id = "add_all"> Add all to the right >></span>
</Div>
</Div>
<Div class = "centent">
<Select multiple = "multiple" id = "select2" style = "width: 100px; height: 160px;">
<Option value = "8"> option 8 </option>
</Select>
<Div>
<Span id = "remove"> <selected to be deleted to the left </span>
<Span id = "remove_all"> <delete all to the left </span>
</Div>
</Div>
</Body>
Note the multiple attribute of select. multiple select options will appear in the select box only after it is added.
Otherwise, only one entry is displayed.
JQuery code parsing:
Copy codeThe Code is as follows:
<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>
Note that$ ("Option: selected", this ). This looks a bit strange. In fact, $ () has two parameters: a selector and a scope. It must be differentiated from $ ("xxxx, xxx. In general, $ ('xxxx') is actually the second scope by default. The complete description should be $ ('xxxx', document ). After this is added, the scope is limited to # select1 or # select2. That is, the selected item in select1 is added to the end of # select2.
The effect is similar to $ ("# select1 option: selected ").
If this parameter is not added, the selected item is involved. An error occurs.
NOTE 2:
The difference between append () and appendTo () methods.
Append (content | fn) adds content to each matching element.
AppendTo (content) append all matched elements to another specified element set.
The former adds content to the matching element, and the latter adds the Matching Element to another specified Element Set.
For example, $ ("p"). append ("<B> Hello </B>") is added to the p element <B> Hello </B>.
Original p element content: <p> I wowould like to say: </p> current p element content: [<p> I wowould like to say: <B> Hello </B> </p>] $ ("p "). appendTo ("div"); append the p element to the div element. Original content: <p> I wowould like to say: </p>
<Div> </div> result: <div> <p> I wowould like to say: </p> </div> <p> I wocould like to say: </p> </div>
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
