select 多选框小例-CSDN博客

本文链接：https://blog.csdn.net/terran_li2005/article/details/83336771

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function move(cs){
var addflag = true;
var fl = cs.wxcs.selectedIndex;
var item = new Option(cs.wxcs.options[fl].text,cs.wxcs.options[fl].value);
//判断右列表是否已经存在所选信息
for(var x = 0 ; x <cs.sxcs.options.length; x++){
if (cs.sxcs.options[x].value == cs.wxcs.options[fl].value){//如果右列表中的值等于左列表的值
addflag = false;
}
}
//添加未存在在右边列表的信息
if(addflag){
cs.sxcs.options[cs.sxcs.options.length] = item;
}
}

function moveAll(cs){
var addflag;
var fl = cs.wxcs.selectedIndex;
for(var i = 0 ; i <cs.wxcs.options.length; i++){//循环左框所有值对象
addflag = true;
if(cs.wxcs.options[i].selected){//判断值是否被选中
//判断右列表是否已经存在所选信息
for(var x = 0 ; x <cs.sxcs.options.length; x++){
if (cs.sxcs.options[x].value == cs.wxcs.options[i].value){//如果右列表中的值等于左列表的值
addflag = false;
}
}
//添加未存在在右边列表的信息
if(addflag){
cs.sxcs.options[cs.sxcs.options.length] = new Option(cs.wxcs.options[i].text,cs.wxcs.options[i].value);
}
}
}
}

function dele(cs){
var sp=cs.sxcs.selectedIndex;//当前选择的位置编号
var so = cs.sxcs.options[sp];//获得sp位置编号的值对象
cs.sxcs.remove(sp);//移除此框中的值对象
//定位,当选择的位置为不是最后一个,则位置不动.否则上移.
if (cs.sxcs.options.length>sp) {
sp = sp;
} else {
sp = sp-1;
}
}

function check(frm) {
if(frm.sxcs.length < 0){
alert("请选择参数");
return false;
}
for (x = 0 ; x < frm.sxcs.length ; x++ ){
frm.sxcs.options[x].selected = "true";
}
}
</script>
<BODY>
<form name="form1" action="#" οnsubmit="return check(this);">
<tr>
<td colspan="2" align="center">
<select multiple="true" name="wxcs" size="10" style="width:150px; " οndblclick="move(document.form1);">
<option value="1">站名1</option>
<option value="2">站名2</option>
<option value="3">站名3</option>
<option value="4">站名4</option>
<option value="5">站名5</option>
<option value="6">站名6</option>
</select>
<input type="button" value="-->" name="selectCat" onClick="moveAll(document.form1);"/>
<select multiple="true" name="sxcs" size="10" style="width:150px; " οndblclick="dele(document.form1)">
</select>
</td>
</tr>
</form>
</BODY>
</HTML>