14.3.5 列表框.html

javascript即用即差核心对象手册

<form>
   政治面貌<br>
   <select name="zzmm">
       <option value="1">党员</option>
	   <option value="2">团员</option>
	   <option value="3">群众</option>
	   <option value="4">无党派人士</option>
   </select>
   <input type="button" onClick="expand(this,'zzmm')" value="展开"><br>
   爱好(可多选)<br>
   <select name="fav" size="4"  multiple >
        <option value="运动">--运动--  </option>
		<option value="看书">--看书--  </option>
		<option value="购物">--购物-- </option>
		<option value="旅游">--旅游--  </option>
		<option value="上网">--上网--  </option>
   </select>
   <input type="button" onClick="expand(this,'fav')" value="收缩"><br>
   请选择你熟悉的软件<br>
   <select name="software" size="4"  multiple>
        <option value="potoshop">PhotoShop</option>
		<option value="Dreamwaver">Dreamwaver</option>
		<option value="3D Max">3D Max</option>
		<option value="Office">Office</option>
		<option value="AutoCAD">AutoCAD</option>
   </select>
   <input  type="button" onClick="addItem('software','sel')" value=">>>">
   <input  type="button" onClick="addItem('sel','software')" value="<<<">
   <select name="sel" size="4">
   </select>
   <input type="button" value="提交" onClick="getInfo()"><br>
   <label id="info"></label>
</form>
<script>
   //展开或者收缩指定列表框，同时修改按钮标题
   function expand(btn,name)
   {
      var olst=document.forms[0].elements(name);
	  if(olst.size<2)
	     {
		    olst.size=olst.length;
			btn.value="收缩"
		 }
	  else
	    {
		  olst.size=1;
		  btn.value="展开";
		}
   }
   //把指定的列表框中选择的内容添加到指定的另一个列表框中
   function addItem(from,to)
   {
      var frmList=document.forms[0].elements(from);
	  var toList=document.forms[0].elements(to);
	  var objOp=document.createElement("OPTION")
	  if(frmList.selectedIndex==-1)
	     {
		    alert("没有选择任何内容");
			return;
		 }
		 //获取所选条目的信息
	  objOp.value=frmList.options(frmList.selectedIndex).value;
	  objOp.text=frmList.options(frmList.selectedIndex).text;
	  toList.options.add(objOp);
	  frmList.options.remove(frmList.selectedIndex);
   }
   //得到列表框中所选的全部内容
  function listAll(name)
  {
     var olst=document.forms[0].elements(name);
	 var str="";
	 for(var i=0;i<olst.length;i++)
	 {
	    if(olst.options(i).selected)
		//如果某一条被选中则selected属性值为true
		{
		   str+=olst.options(i).text;
		}
	 }
	 return str;
  }
  //得到列表框中的全部内容
  function getAll(name)
  {
     var olst=document.forms[0].elements(name);
	 var str="";
	 for(var i=0;i<olst.length;i++)
	 {
	    str+=olst.options(i).text;
	 }
	 return str;
  }
  //获取各个列表框中的选择结果
  function getInfo()
  {
     var str="获取到以下信息："
	 str+="政治面貌："+document.forms[0].zzmm.value;
	 str+="；爱好"+listAll("fav");
	 str+="；熟悉软件："+getAll("sel");
	 document.getElementById("info").innerText=str;
  }
</script>
</form>