jQuery实现下拉列表移动 效果
生活随笔
收集整理的這篇文章主要介紹了
jQuery实现下拉列表移动 效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼實現(xiàn)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/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的父節(jié)點類型,(hebei的節(jié)點移到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>
總結
以上是生活随笔為你收集整理的jQuery实现下拉列表移动 效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NFS文件系统简介及原理
- 下一篇： 矩阵图形