jq下拉框

下拉框

html >

< html >

< head >

< meta charset= "UTF-8" >

< title > title >

< script src= "../js/jQuery-2.2.2-min.js" > script >

head >

< body >

< table >

< tr >

< td >

< select id= "select1" multiple= "multiple" style= " width : 300 px ; height : 200 px " >

< option value= "1" > 成都 option >

< option value= "2" > 上海 option >

< option value= "3" > 重庆 option >

< option value= "4" > 浙江 option >

< option value= "5" > 广州 option >

select >

td >

< td >

< button id= "add" > > button >

< button id= "remove" > < button >

< button id= "add_all" > >> button >

< button id= "remove_all" > << button >

td >

< td >

< select id= "select2" multiple= "multiple" style= " width : 300 px ; height : 200 px " >

select >

td >

tr >

table >

body >

< script type= "text/javascript" >

$ ( function () {

//选中过去

$ ( "#add" ). click ( function () {

var $option = $ ( "#select1 option:selected" ); //获取选中的选项

$option . appendTo ( "#select2" ); //追加给对方

});

//选中回来

$ ( "#remove" ). click ( function () {

var $option = $ ( "#select2 option:selected" );

$option . appendTo ( "#select1" );

});

//全部过去

$ ( "#add_all" ). click ( function () {

var $option = $ ( "#select1 option" );

$option . appendTo ( "#select2" );

});

//全部回来

$ ( "#remove_all" ). click ( function () {

var $option = $ ( "#select2 option" );

$option . appendTo ( "#select1" );

});

});

script >

html >