基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
最近再做報(bào)表時(shí)候,直接把全部字段都導(dǎo)出了,但這不太靈活。回憶老師講過(guò)的項(xiàng)目做報(bào)表如下左右上下移功能靈活控制,所以就嘗試下咯。
js代碼
function selected(thiz) { var name = thiz.name; if(name=="right") $("select[name='left']").val(""); else $("select[name='right']").val(""); } function Shift(thiz) { var right = $("select[name='right']"); var left = $("select[name='left']"); if(thiz=="left" && right.val() != ""){ lrShift(right,left); }else if(thiz=="right" && left.val() != ""){ lrShift(left,right); } //獲取選中的值 } //從dest移動(dòng)到target function lrShift(dest,target) { var childrens = dest.children(); var args = ""; //alert(dest.val()); var dests = dest.val() for(var x = 0; x < dests.length; x++) { var vaTemp = dests[x]; target.append("<option value='"+vaTemp+"'>"+vaTemp+"</option>");//追加 target.find("option[value='"+vaTemp+"']").attr("selected",true);//給追加獲取焦點(diǎn) for(var y = 0; y <childrens.length;y++ )//刪除選中的元素 { if(childrens.get(y).value==vaTemp) $(childrens.get(y)).remove(); } } dest.val(""); } function ShiftValue(address) { var right = $("select[name='right']"); var left = $("select[name='left']"); if(right.val()!=null) shift(right,address); else if(left.val()!=null) shift(left,address); } function shift(obj,address){ //獲取選中的值 var objData = obj.val(); var childrens = obj.children(); var strs = ""; for(var x = 0; x < objData.length; x++) { strs+="@"+objData[x]; } //獲取要添加位置對(duì)象 var temp = null; if(address=="top"){ var number = findSelect(childrens,objData[0]); if((--number) < 0) return; temp = childrens.get(number); } else{ var number = findSelect(childrens,objData[objData.length-1]); if((++number) > childrens.length-1) return; temp = childrens.get(number); } //刪除選中的值 var n = 0; var buffer = new Array(childrens.length-objData.length); for(var x = 0; x < childrens.length;x++) { var value = childrens.get(x).value; if(strs.indexOf(value)==-1) buffer[n++] = value; } //添加新排序的值 obj.empty(); if(address=="top") { for(var y = 0; y < buffer.length;y++) { if(buffer[y]==temp.value) { for(var x = 0; x < objData.length ; x++) { obj.append("<option>"+objData[x]+"</option>"); } } obj.append("<option>"+buffer[y]+"</option>"); } }else{ for(var y = 0; y < buffer.length;y++) { obj.append("<option>"+buffer[y]+"</option>"); if(buffer[y]==temp.value) { for(var x = 0; x < objData.length; x++) { obj.append("<option>"+objData[x]+"</option>"); } } } } //選中值 obj.val(objData); } function findSelect(selects,objValue) { var number = -1; for(var x = 0; x < selects.length; x++) { if(objValue==selects.get(x).value) number = x; } return number; }
頁(yè)面調(diào)用
<div> <div> <b>未導(dǎo)出字段</b> </div> <div style="float:left;"> <select name="left" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;"> <option value="姓名">姓名</option> <option value="快件號(hào)">快件號(hào)</option> <option value="快遞公司">快遞公司</option> <option value="首重">首重</option> <option value="續(xù)重">續(xù)重</option> </select> </div> </div> <div style="float:left;"> <div style="margin:30px;margin-top:110px;"> <input type="button" value="<<" onclick="Shift('left')"/> </div> <div style="margin:30px;margin-top:30px;"> <input type="button" value=">>" onclick="Shift('right')"/> </div> </div> <div style="margin-top:-20px;"> <div style="margin-left:22%;"> <b>需導(dǎo)出字段</b> </div> <div style="float:left;"> <select name="right" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;"> <option value="首價(jià)">首價(jià)</option> <option value="續(xù)價(jià)">續(xù)價(jià)</option> <option value="大大">大大</option> <option value="小小">小小</option> </select> </div> </div> <div style="float:left;"> <div style="margin:30px;margin-top:110px;"> <input type="button" value="向上" onclick="ShiftValue('top')" /> </div> <div style="margin:30px;margin-top:30px;"> <input type="button" value="向下" onclick="ShiftValue('bottom')" /> </div> </div>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能示例
- jQuery實(shí)現(xiàn)可移動(dòng)選項(xiàng)的左右下拉列表示例
- jquery實(shí)現(xiàn)列表上下移動(dòng)功能
- jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
- jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
- jQuery讓控件左右移動(dòng)的三種實(shí)現(xiàn)方法
- jQuery slider Content(左右控制移動(dòng))
- jQuery實(shí)現(xiàn)下拉框左右移動(dòng)(全部移動(dòng),已選移動(dòng))
- Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
相關(guān)文章
基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能的方法,涉及jQuery操作數(shù)據(jù)實(shí)現(xiàn)補(bǔ)全的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫(huà)效果(附在線演示與demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫(huà)效果,并附帶在線演示與demo源碼供讀者下載.涉及jQuery鼠標(biāo)事件響應(yīng)及基于animate動(dòng)畫(huà)效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼
前幾天上QQ的在線視頻網(wǎng)站,看到上面的影片列表頁(yè)的圖片有這樣一種效果:當(dāng)向下拉動(dòng)滾動(dòng)條時(shí)下面的圖片才開(kāi)始加載,就是說(shuō)它不會(huì)一下子把所有的圖片都加載出來(lái),拉動(dòng)滾動(dòng)條后用戶看到了才會(huì)顯示,這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。2010-02-02jquery中toggle函數(shù)交替使用問(wèn)題
jQuery 的toggle()函數(shù)使用show()或hide()函數(shù)來(lái)切換HTML元素的可見(jiàn)狀態(tài)。今天我們來(lái)探討下jquery中toggle函數(shù)交替使用問(wèn)題2015-06-06jQuery UI Autocomplete 1.8.16 中文輸入修正代碼
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼,使用jQuery UI Autocomplete的朋友可以參考下2012-04-04jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)擊其他地方讓菜單消失的實(shí)現(xiàn)思路與解決方法,需要的朋友可以參考下2016-04-04jquery利用event.which方法獲取鍵盤(pán)輸入值的代碼
jquery利用event.which方法獲取鍵盤(pán)輸入值的代碼,需要的朋友可以參考下。2011-10-10用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼,需要的朋友可以參考一下2013-06-06