javascript下拉框联动效果

 

 代码如下 复制代码

<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>
时间： 2024-10-01 21:56:54

javascript下拉框联动效果的相关文章

JavaScript Ajax Json实现上下级下拉框联动效果实例代码_javascript技巧

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 复制代码 代码如下: <div class="forntName">部门</div> <div class="inpBox"> <select  name="department" id="department"  onchange="change();" style="width:

JQuery打造省市下拉框联动效果_jquery

做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面.考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容.用JQuery实现比较容易,代码以省市联动效果为例实现. JSP页面代码如下: 复制代码 代码如下: <li id="base"> <p>生源地:</p> <label> <select id=&

jQuery+jsp下拉框联动获取本地数据的方法(附源码)_jquery

本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法.分享给大家供大家参考,具体如下: JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量.(点击此处下载源代码) 下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包 commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.3.jar commons-logging-1.0.4.jar ez

实现jsp页面二级下拉框联动，实时读取数据库数据

在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常有用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp,main.js,bytetostr.js, 先讲一下main.js,这是javascript,其中注意修改jsp页面名称. 以下为引用的内容: function findObject(fName,initValue)...{   var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   xmlht

在一个jsp页面实现二级下拉框联动

js|下拉|页面 在一个jsp页面实现二级下拉框联动,实时读取数据库数据. 在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp,main.js,bytetostr.js, 先讲一下main.js,这是javascript,其中注意修改jsp页面名称.  function findObject(fName,initValue)...{   var xmlhttp = new ActiveXObject("Micr

基于Ajax实现下拉框联动显示数据_AJAX相关

公司做项目的时候,需要用到下拉框联动显示数据的功能,索性利用Ajax来实现,看到时间比较充裕,就没去找demo自己去想方法写了.纯自己的想法,有些可能比较弱智,希望不要见笑. 页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style=&q

Ajax学习之------&amp;gt;Ajax和Json实现无限下拉框联动(上)

  init.jsp页面,直接跳转到InitShengServlet2这个servlet初始化省份 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <jsp:forward page="/InitShengServlet2"></jsp:forward>   /** 该servlet初始化完后跳转到li

基于Ajax实现下拉框联动显示数据

公司做项目的时候,需要用到下拉框联动显示数据的功能,索性利用Ajax来实现,看到时间比较充裕,就没去找demo自己去想方法写了.纯自己的想法,有些可能比较弱智,希望不要见笑. 页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style=&q

easyui-请问如何在&amp;amp;lt;th&amp;amp;gt;标签中实现下拉框的效果？

问题描述 请问如何在<th>标签中实现下拉框的效果? 项目前台用的是easyUI来显示数据,现在需要在" "标签中实现下拉框的效果,请问怎样做? 解决方案 th标签内嵌套select标签 解决方案二: 可以使用div放在th里面,通过事件来显示或隐藏