多选select框从左边的复选框移到右边复选框

多选select框常用函数，从左边的复选框选出到右边复选框

multipleSelect.js

/**  多选select框常用函数，从左边的复选框选出到右边复选框
 *  @author QUJIAYUAN076
 *  @date 2014-06-13
 */

/**
 * 复选框选择全部
 * 
 * @param multipleSelectId
 *            复选select的ID
 * @returns
 */
function multipleSelectAll(multipleSelectId) {
    var multipleSelect = document.getElementById(multipleSelectId);
    for (var i = 0; i < multipleSelect.options.length; i++) {
        multipleSelect.options[i].selected = true;
    }
}

/**
 * 复选框取消选择全部
 * 
 * @param multipleSelectId
 *            复选select的ID
 * @returns
 */
function multipleUnSelectAll(multipleSelectId) {
    var multipleUnSelect = document.getElementById(multipleSelectId);
    for (var i = 0; i < multipleUnSelect.options.length; i++) {
        multipleUnSelect.options[i].selected = false;
    }
}

/**
 * 从备选multipleSelect挑选指定的option至目标multipleSelect
 * 
 * @param srcSelectId
 *            备选multipleSelect的id
 * @param desSelectId
 *            目标multipleSelect的id
 * @returns
 */
function moveMultipleOption(srcSelectId, desSelectId) {
    var src = document.getElementById(srcSelectId);
    var des = document.getElementById(desSelectId);　　　　
    if (src.selectedIndex == -1) {        　　　　　　
        return;　　　　
    }　　　　
    for (var i = 0; i < src.length; i++) {　　　　　　
        if (src[i].selected) {　　　　　　　　
            var op = document.createElement("option");
            op.value = src.options[src.selectedIndex].value;
            op.text = src.options[src.selectedIndex].text;
            des.options.add(op);
            src.remove(i);
            i--;
        }　　　　
    }　　
}

/**
 * 将目标multipleSelect的值组装成以“@”号连接的字符串
 * 
 * @param multipleSelectId
 *            目标multipleSelect的id
 * @returns 组装后的字符串
 */
function getMultipleSelectValue(multipleSelectId) {
    var multipleSelect = document.getElementById(multipleSelectId);
    var selectedValue = "";
    for (var i = 0; i < multipleSelect.options.length; i++) {
        selectedValue += multipleSelect.options[i].value + "@";
    }
    if(selectedValue.indexOf(",") != -1) {
    	selectedValue = selectedValue.substring(0, selectedValue.length - 1);
    }
    return selectedValue;
}

html:

<!DOCTYPE html>
<html>
<head>
<title>多选select框常用函数，从左边的复选框选出到右边复选框</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script language="JavaScript" src="multipleSelect.js"></script>
<script language="JavaScript"> 
 
 
function getsignNamesValue() {
	var signNames = document.getElementById("signNames");
	signNames.value = getMultipleSelectValue("rightSelect");
}
 
</script>
</head>
<body>
 
<table>
	<tr>
		<td style="vertical-align: top;">
		请选择城市(双击)：<br/>
			<select id="leftSelect" name="leftSelect" ondblclick="moveMultipleOption('leftSelect','rightSelect');" multiple="multiple" style="width: 300px;height:180px;">
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3">广州</option>
				<option value="4">深圳</option>
				<option value="5">成都</option>
				<option value="6">天津</option>
				<option value="7">南京</option>
				<option value="8">杭州</option>
				<option value="9">武汉</option>
				<option value="10">沈阳</option>
				<option value="11">长沙</option>
				<option value="12">重庆</option>
				<option value="13">济南</option>
				<option value="14">福州</option>
				<option value="15">厦门</option>
			</select>
		</td>
		<td style="vertical-align: middle;">
			<input id="btnRight" name="btnRight" class="button1" type="button" onclick="moveMultipleOption('leftSelect','rightSelect');" value=">>">
			<br/>
			<input id="btnLeft" name="btnLeft" class="button1" type="button" onclick="moveMultipleOption('rightSelect','leftSelect');" value="<<" >
		</td>
		<td>已选择的城市：<br/>
			<input type="hidden" id="signNames" name="signNames" value=""/>
			<select id="rightSelect" name="rightSelect" ondblclick="moveMultipleOption('rightSelect','leftSelect');" multiple="multiple" style="width: 300px;height:180px;">
			</select>
		</td>
		<td> <input type="submit" name="submit" value="查询" class="button2" />
		</td>
	</tr>
	<tr>
		<td style="text-align: right;"><a href="javascript:multipleSelectAll('leftSelect');">全选</a> <a
						href="javascript:multipleUnSelectAll('leftSelect');">取消全选</a></td>
		<td></td>
		<td style="text-align: right;"><a href="javascript:multipleSelectAll('rightSelect');">全选</a> <a
						href="javascript:multipleUnSelectAll('rightSelect');">取消全选</a></td>
		<td>
		</td>
		
	</tr>
</table>
 
 
</div>
</body>

多选select框从左边的复选框移到右边复选框

猜你喜欢