2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > jQuery实现下拉列表移动 效果

jQuery实现下拉列表移动 效果

时间:2021-09-28 17:22:14

相关推荐

jQuery实现下拉列表移动  效果

代码实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript" src="./jquery-1.4.4.js"></script><script type="text/javascript">$(function(){$('option').dblclick(function(){//this分别依次代表每个option的dom对象//判断当前option的父节点类型,(hebei的节点移到henan,反之亦然)再做移动操作if(this.parentNode.id=='hebei'){$(this).appendTo($('#henan'));}else{$(this).appendTo($('#hebei'));}});});function toRight(){//左侧"选中"的项目移动到右侧$("#hebei option:selected").appendTo($('#henan'));}function toLeft(){//右侧"选中"的项目移动到左侧$("#henan option:selected").appendTo($('#hebei'));}function toAllRight(){//左侧全部项目移动到右侧$("#hebei option").appendTo($('#henan'));}function toAllLeft(){//右侧全部的项目移动到左侧$("#henan option").appendTo($('#hebei'));}</script><style type="text/css">select{width:130px; height:220px;}</style></head><body><select id="hebei" multiple="multiple"><option>石家庄</option><option>保定</option><option>邯郸</option><option>邢台</option><option>衡水</option></select><select id="henan" multiple="multiple"><option>郑州</option><option>开封</option><option>洛阳</option><option>周口</option><option>信阳</option></select><br /><br /><input type="button" value="-->" οnclick="toRight()"><input type="button" value="==>" οnclick="toAllRight()"><input type="button" value="<--" οnclick="toLeft()"><input type="button" value="<==" οnclick="toAllLeft()"></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。