After JQ is selected, it moves left and right. After JQ is selected, it moves right and right.
<Head>
<Meta charset = "UTF-8"/>
<Title> select_option move </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>
</Head>
<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 1 </option>
<Option> option 2 </option>
<Option> option 3 </option>
<Option> option 4 </option>
<Option> option 5 </option>
<Option> option 6 </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>