使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請(qǐng)
<html>
<head>
<meta http-equiv="Content-Type " content="text/html; charset=gb2312 ">
<title>list測(cè)試</title>
</head>
<body>
<div style="font-size: 10pt;">
注1：左右移動(dòng)進(jìn)行選取
<br />
<br />
注：本頁(yè)面僅在IE6/FireFox1.5下測(cè)試過(guò)。其它瀏覽器或其它版本未經(jīng)測(cè)試。
<br />
<hr />
</div>
<form name="frm">
<table>
<tr>
<td>
<select name="SrcSelect" size="6" style="font-size: 11pt; width: 160px; height: 160px"
multiple="multiple" ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">
<option value="1">講師</option>
</select>
</td>
<td width="30px">
<input align="left" type="button" value="> " onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">
<br>
<br>
<input align="left" type="button" value=" < " onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">
</td>
<td>
<select name="ObjSelect" size="6" style="font-size: 11pt; width: 160px; height: 160px"
multiple="multiple" ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">
<option value="2">教學(xué)管理員</option>
<option value="3">超級(jí)管理員</option>
</select>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" language="javascript">
//上移
function moveUp() {
var theObjOptions = document.frm.ObjSelect.options;
for (var i = 1; i < theObjOptions.length; i++) {
if (theObjOptions[i].selected && !theObjOptions[i - 1].selected) {
swapOptionProperties(theObjOptions[i], theObjOptions[i - 1]);
}
}
}
//下移
function moveDown() {
var theObjOptions = document.frm.ObjSelect.options;
for (var i = theObjOptions.length - 2; i > -1; i--) {
if (theObjOptions[i].selected && !theObjOptions[i + 1].selected) {
swapOptionProperties(theObjOptions[i], theObjOptions[i + 1]);
}
}
}
function swapOptionProperties(option1, option2) {
var tempStr = option1.value;
option1.value = option2.value;
option1.value = tempStr;
tempStr = option1.text;
option1.text = option2.text;
option2.text = tempStr;
tempStr = option1.selected;
option1.selected = option2.selected;
option2.selected = tempStr;
}
//列表框的位置移動(dòng)
function moveLeftOrRight(fromObj, toObj) {
for (var i = 0; i < fromObj.length; i++) {
var srcOption = fromObj.options[i];
if (srcOption.selected) {
toObj.appendChild(srcOption);
i--;
}
}
}
</script>
相關(guān)文章
詳解webpack和webpack-simple中如何引入css文件
這篇文章主要介紹了詳解webpack和webpack-simple中如何引入css文件，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序用戶位置權(quán)限的獲取方法（拒絕后提醒）,文中給大家介紹了微信小程序獲取用戶當(dāng)前位置的三個(gè)方式，授權(quán)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
微信小程序如何使用Promise對(duì)wx.request()封裝詳解(附完整代碼)
微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫(kù)傳輸模式,數(shù)據(jù)傳輸簡(jiǎn)單明確,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何使用Promise對(duì)wx.request()封裝的相關(guān)資料,需要的朋友可以參考下2023-03-03
在項(xiàng)目中需要分析將一個(gè)有規(guī)則的字符串分割成一個(gè)字符串?dāng)?shù)組。2009-09-09
JavaScript操作壓縮圖片原理不難，已有成熟 API，然而在實(shí)際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會(huì)越壓縮越大，加之終端（手機(jī)）類型眾多，有些手機(jī)壓縮圖片甚至變黑。本文將一步一步解決此類問(wèn)題2021-05-05
這篇文章介紹了JS異步的執(zhí)行順序，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
JavaScript復(fù)制內(nèi)容到剪貼板的兩種常用方法
最近一個(gè)活動(dòng)頁(yè)面中有一個(gè)小需求，用戶點(diǎn)擊或者長(zhǎng)按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過(guò)程和遇到的坑,需要的朋友可以參考下2018-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片切換
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載
發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載...2007-07-07
js+css實(shí)現(xiàn)tab菜單切換效果的方法
這篇文章主要介紹了js+css實(shí)現(xiàn)tab菜單切換效果的方法,以實(shí)例形式完整講述了css與js的實(shí)現(xiàn)代碼,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01