Select either the Jquery drop-down box or the Jquery drop-down box
1. Description
This demo implementation drop-down box left and right select, this article address: http://www.cnblogs.com/lengzhan/p/6423023.html
2. Code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> </title> <style type =" text/css ">. centent {width: 260px ;}. cententl {float: left ;}. btnAdd {float: left; padding: 30px 5px ;}</style> <script src = "scripts/jquery. js "type =" text/javascript "> </script> <script type =" text/javascript ">$ (function () {// move to the right $ ('# btnadd '). click (function () {// obtain the selected option, delete the selected option, and append it to the peer $ ('# select1 option: selected '). appendTo ('# select2') ;}); // move to the left $ ('# btnDel '). click (function () {// obtain the selected option, delete the selected option, and append it to the peer $ ('# select2 option: selected '). appendTo ('# select1') ;}); // move all to the right $ ('# btnAdds '). click (function () {// obtain all options, delete yourself and append it to the other party $ ('# select1 option '). appendTo ('# select2') ;}); // move all to the left $ ('# btndels '). click (function () {// obtain all options, delete yourself and append it to the other party $ ('# select2 option '). appendTo ('# select1') ;}); // double-click the option $ ('# select1 '). dblclick (function () {// obtain the double-click option, delete itself and append it to the other party $ ("option: selected", this ). appendTo ('# select2') ;}); // double-click the option $ ('# select2 '). dblclick (function () {// obtain the double-click option, delete itself and append it to the other party $ ("option: selected", this ). appendTo ('# select1 ');});}); </script>
3. Demo
Click to download
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
