jQuery实现两个列表框的值之间的互换：
生活随笔
收集整理的這篇文章主要介紹了
jQuery实现两个列表框的值之间的互换：
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery實現兩個列表框的值之間的互換：
截圖如下：
代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>列表框的綜合應用</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">$(function(){$("#right").click(function(){ <%--判斷用戶是否單擊的向右按鈕--%>var $options = $("#select option:selected"); <%--獲取用戶選擇的列表項--%>var $remove = $options.remove(); <%--將列表項刪除--%>$remove.appendTo('#select2'); <%--將刪除的列表項追加到select2中--%>});$('#rightAll').click(function(){ <%--判斷用戶是否單擊了全部向右移動按鈕--%>var $options = $('#select option'); <%--獲取全部的列表項--%>$options.appendTo('#select2'); <%--將全部的列表項追加到select2中--%>});$("#left").click(function(){var $options = $('#select2 option:selected'); <%--判斷用戶是否單擊的向左按鈕--%>var $remove = $options.remove(); <%--將列表項刪除--%>$remove.appendTo('#select'); <%--將刪除的列表項追加到select中--%>});$('#leftAll').click(function(){var $options = $('#select2 option');var $remove = $options.remove();$remove.appendTo('#select');});}); </script> </head><body> <table border="0" cellpadding="0" cellspacing="0"><tr><td width="125"><div align="center"><label><select multiple="multiple" size="6" name="select" id="select"><option value="英語聽說">英語聽說</option><option value="聲樂">聲樂</option><option value="美術">美術</option><option value="書法">書法</option><option value="高數">高數</option><option value="兒童文學">兒童文學</option></select></label></div></td><td width="51"><label><div align="center"><input type="button" name="right" id="right" value=">|"/><br/><input type="button" name="rightAll" id="rightAll" value=">>"/><br/><input type="button" name="left" id="leftAll" value="<<"/><br/><input type="button" name="leftAll" id="left" value="|<"/></div></label></td><td width="125"><div align="center"><select multiple="multiple" size="6" name="select2" id="select2"></select></div></td></tr> </table> </body> </html>
總結
以上是生活随笔為你收集整理的jQuery实现两个列表框的值之间的互换：的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 食饵捕食者模matlab,几类食饵-捕食
- 下一篇： 32位mips运算器logisim_大神