龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript下拉框联动效果

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
这是一个简单的利用js实现的联动效果菜单 ,有需要的朋友可以参考一下,我们把主要类先读出来,再保存到js数组,当用户点击主类时就利用js获取它的值,再遍历把二级下拉框重新赋
这是一个简单的利用js实现的联动效果菜单 ,有需要的朋友可以参考一下,我们把主要类先读出来,再保存到js数组,当用户点击主类时就利用js获取它的值,再遍历把二级下拉框重新赋值。

 

 代码如下

<script language="javascript">
 subcat = new Array();
  subcat[0] = new Array("D530","1","3");
  subcat[1] = new Array("D539","1","4");
  subcat[2] = new Array("E239","1","5");
  subcat[3] = new Array("N930","1","6");
  subcat[4] = new Array("W711","1","7");
  subcat[5] = new Array("W721","1","8");
  subcat[6] = new Array("MINI5","2","9");
  subcat[7] = new Array("STREAK7","2","10");
  subcat[8] = new Array("VENUE","2","11");
  var onecount=subcat.length;
 function changelocation(locationid)
    {
  document.search.tid.length = 1;
  var locationid=locationid;
  var i;
  var nindex;
  for (i=0;i < onecount; i++)
  {
   if (subcat[i][1] == locationid)
   {
    document.search.tid.options[document.search.tid.length] = new Option(subcat[i][0], subcat[i][2]);
   
   }       
  }
  
    }
  
 function doChange(objText, objDrop)
 {
  if (!objDrop) return;
  var str = objText.value;
  var arr = str.split("|");
  var nIndex = objDrop.selectedIndex;
  objDrop.length=1;
   for (var i=0; i<arr.length; i++){
    objDrop.options[objDrop.length] = new Option(arr[i], arr[i]);
   }
  objDrop.selectedIndex = nIndex;
 }
</script>

<form id="search" name="search" method="post" >
<select name="zid" id="zid"  onblur="changelocation(document.search.zid.options[document.search.zid.selectedIndex].value)">
            <option value="0">== 主栏目 ==</option>
            <option value=1>酷派</option>
<option value=2>戴尔</option>
          </select>
          &nbsp; </label>
         
         <select  name="tid"   id="tid">
  
       <option value="0">--二级分类--</option>
   
        </select>
</form>


精彩图集

赞助商链接