jQuery实现下拉框功能实例代码

说一百句，不如我给大家贴张效果图，效果图请看下面：

！DOCTYPE html html lang=' en ' xmlns=' http://www .w3。org/1999/XHTML ' hearta charset=' utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0 0；padd : 0；} div.centent {左侧浮动：文本对齐：中心；边距： 10px} span { display:块；margin : 2px 2 xpadding : 4px 10px背景技术： # 898989;光标：指针；font-size : 12px颜色：白色；}/style脚本src=' http : jquery-1。3 .2 .量滴js '/script script $(function(){ $(“# add”)).单击(函数(){//单个添加var $ options=$(' # select 1 options : selected ')；$选项。appendo(' # select 2 ')；});$('#add_all ').单击(函数(){//全部添加$('#select1选项').每个（函数(){$(此)).appendo(' # select 2 ')；/*也可以写为：var p=$(' #选择1个选项')；p . appendo(' # select 2 ')；*/});});$('#remove ').单击(函数(){//同上，只不过方向相反var $ options=$(' # select 2 options : selected ')；//var $ remove=$ options。移除()；$选项。appendo(' # select 1 ')；});$('#remove_all ').单击(函数(){//同上，只不过方向相反var p=$(' #选择2选项')；p . appendo(' # select 1 ')；});});/script/head dydiv class=' centet ' select multiple id=' select 1 ' style=' width :100 px；高度' :160px '选项值='1 '选项1/optionoption值='2 '选项2/optionoption值='3 '选项3/optionoption值='4 '选项4/optionoption值='5 '选项5/optionoption值='6 '选项6/option/selectdivspan id='add '选中添加到右边/spanspan id='add_all '全部添加到右边；/span/div/div class=' centet ' select multiple id=' select 2 ' style=' width :100 px；高度：160 px '/selectdiv span id=' remove '选中删除到左边/spanspan id='remove_all '全部删除到左边/span/div/div/body/html以上内容是小编给大家介绍的框架下拉框功能实例，希望对大家有所帮助！