<meta charset= "Utf-8"/>
<title>select_option Mobile </title>
<style>
* {
padding:0px;
margin:0px;
}
. All {
width:100%;
height:200px;
}
. select_1 {
Float:left;
width:100px;
height:200px;
}
. select_2 {
Float:left;
width:100px;
height:200px;
}
. btn {
Float:left;
width:66px;
height:200px;
margin-top:100px;
}
. btn Button {
margin-top:20px;
width:66px;
height:20px;
}
</style>
<body>
<div class= "All" >
<div style= "height:200px; width:10%; Float:left; margin-left:100px; margin-top:100px; " >
<select class= "select_1" multiple= "multiple" >
<option value= "opt1" > Option one </option>
<option> Options Two </option>
<option> option three </option>
<option> Options Four </option>
<option> Options Five </option>
<option> Options Six </option>
</select>
</div>
<div class= "BTN" >
<button class= "BTN1" > Selected ></button>
<button class= "BTN2" > All >></button>
<button class= "Btn3" > Selected <</button>
<button class= "Btn4" > All <<</button>
</div>
<div style= "height:200px; width:10%; Float:left; margin-left:30px; margin-top:100px; " >
<select class= "select_2" multiple= "multiple" ></select>
</div>
</div>
</body>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script>
$ (function () {
$ ('. Btn1 '). Click (function () {
$ ('. select_1>option:selected '). AppendTo ('. select_2 ');
})
$ ('. Btn2 '). Click (function () {
$ ('. Select_1 option '). AppendTo ('. select_2 ');
})
$ ('. Btn3 '). Click (function () {
$ ('. select_2>option:selected '). AppendTo ('. select_1 ');
})
$ ('. Btn4 '). Click (function () {
$ ('. Select_2 option '). AppendTo ('. select_1 ');
})
})
</script>
JQ implementation selected to move left and right
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
