jquery实现下拉框功能效果【实例代码】

说不清楚，直接上图

！DOCTYPE html html lang=' en ' xmlns=' http://www .w3。org/1999/XHTML ' head meta charset=' utf-8 '/title/title style type=' text/CSS ' * { margin 3360 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 body div class=' centet ' select multiple id=' select 1 ' style=' width :100 px；'高度：160像素选项值='1 '选项1/选项选项值='2 '选项2/选项选项值='3 '选项3/选项选项值='4 '选项4/选项选项值='5 '选项5/选项选项值='6 '选项6/选项/选择div span id='add '选中添加到右边/span span id='add_all '全部添加到右边；/span/div/div class=' centet ' select multiple id=' select 2 ' style=' width :100 px；高度：160 px '/选择div span id=' remove '选中删除到左边/span span id='remove_all '全部删除到左边/span /div /div/body/html以上这篇框架实现下拉框功能效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。