JS下拉列表的操作学习

<!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="">
  <script language="JavaScript" type="text/javascript">

     var city=[
   ["北京","天津","上海","重庆"],
   ["南京","苏州","南通","常州"],
   ["福州","福安","龙岩","南平"],
   ["广州","潮阳","潮州","澄海"],
   ["兰州","白银","定西","敦煌"]
   ];

  function getCity()
  {
  var sltProvince =document.form1.province;
  var sltCity =document.form1.city;

  var provinceCity =city[sltProvince.selectedIndex-1];
  sltCity.length =1;
  for(var i =0; i<provinceCity.length;i++)
  {
  sltCity[i+1] =new Option(provinceCity[i],provinceCity[i]);
  }

  }
  function sltOn()
  {
  var sltCity =document.form1.city;
  try
  {
	sltCity.selectedIndex=sltCity.selectedIndex-1;
  }
  catch (e)
  {
  }
  }
 
    function sltDown()
  {
  var sltCity =document.form1.city;
  try
  {
	sltCity.selectedIndex=sltCity.selectedIndex+1;
  }
  catch (e)
  {
  }
  }
   function sltFrist()
  {
  var sltCity =document.form1.city;
  try
  {
	sltCity.selectedIndex=0;
  }
  catch (e)
  {
  }
  }
   
   function sltLast()
  {
  var sltCity =document.form1.city;
  try
  {
	sltCity.selectedIndex=sltCity.length;
  }
  catch (e)
  {
  }
  }
  </script>
 </HEAD>

 <BODY>
 

  <FORM METHOD=POST ACTION="" name="form1">
    <SELECT NAME="province" onChange="getCity()">
    <OPTION VALUE="0">请选择所在省份 </OPTION>
     <OPTION VALUE="直辖市">直辖市 </OPTION>
    <OPTION VALUE="江苏省">江苏省 </OPTION>
      <OPTION VALUE="福建省">福建省 </OPTION>
    <OPTION VALUE="广东省">广东省 </OPTION>
     <OPTION VALUE="甘肃省">甘肃省 </OPTION>
     </SELECT>
    <SELECT NAME="city">
     <OPTION VALUE="0">请选择所在城市 </OPTION>
   </SELECT>
   <input type="button" id ="on" value="向上" onclick="sltOn()"/>
   <input type="button" id="but" value="向下"  onclick="sltDown()"/>
   <input type="button" id="first" value="第一个" onclick="sltFrist()"/>
   <input type="button" id="last" value="最后一个" onclick="sltLast()"/>
  </FORM>


 </BODY>
</HTML>

原文地址:https://www.cnblogs.com/hellohongfu/p/1770108.html