js Select下拉列表框进行多选、移除、交换内容

时间：2022-06-25 19:44:21 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Select下拉列表框进行多选、移除、交换内容</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body style="font-size:12px"> 
<form name="form1" method="post" action=""> 
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td width="150"> 
<table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC"> 
      <tr> 
        <td height="25" background="/electbg.jpg" bgcolor="#FFFFFF">　　　请选择：</td> 
      </tr> 
      <tr> 
        <td align="center" bgcolor="#FFFFFF"> 
<select name="sel_place1" size="6" multiple id="sel_place1" style="width:100px " > 
  <option value="sel1">江苏省</option> 
  <option value="sel2">广东省</option> 
  <option value="sel3">河南省</option> 
  <option value="sel4">吉林省</option> 
  <option value="sel5">浙江省</option> 
</select> 
</td> 
      </tr> 
    </table></td> 
    <td  align="center" valign="bottom"> 
<input name="sure1" type="button" id="sure1"  onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<">    
<input name="sure2" type="button" id="sure2"  onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" > 
</td> 
    <td > 
<table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC"> 
      <tr> 
        <td height="25" background="/selectbg.jpg" bgcolor="#FFFFFF">　　　已选择：</td> 
      </tr> 
      <tr> 
        <td align="center" bgcolor="#FFFFFF"> 
<select name="sel_place2" size="6" multiple id="sel_place2" style="width:100px ">   </select> 
</td> 
      </tr> 
    </table></td> 
  </tr> 
</table> 
</br></br> 
<center> 
  <input  type="button" id="btn1"  onClick="submitForm();" value="提交"> 
</center> 
</form> 
<script language="javascript"> 
function allsel(n1,n2) 
{ 
  while(n1.selectedIndex!=-1) 
  { 
  var indx=n1.selectedIndex; 
  var t=n1.options[indx].text; 
var v=n1.options[indx].value; 
  n2.options.add(new Option(t,v)); 
  n1.remove(indx); 
  } 
} 
//提交存值 
function submitForm(){ 
n2 = document.form1.sel_place2; 
n2_len= n2.options.length; 
var n2_val=''; 
for(i=0;i<n2_len;i++){ 
n2_val+=n2.options[i].value; 
if(i!=n2_len-1){ 
n2_val+='|'; 
} 
} 
alert(n2_val);//存值：例如： 
}

//初始化反显 dfzhao 
window.onload = function() { 
n1 = document.form1.sel_place1; 
n2 = document.form1.sel_place2; 
init_val='sel1|sel5|sel3'; 
init_arra=init_val.split("|");  
for (var i=0;i<init_arra.length ;i++ ) { 
for(var x=0; x<n1.options.length ;x++){ 
if(init_arra[i]==n1.options[x].value){ 
n2.options.add(new Option(n1.options[x].text,n1.options[x].value)); 
n1.remove(x); 
} 
} 
} 
}

</script> 
</body> 
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js Select下拉列表框进行多选、移除、交换内容

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程