关于js二级联动的实现

最新推荐文章于 2022-04-13 21:34:12 发布

Wismyluckstar

最新推荐文章于 2022-04-13 21:34:12 发布

阅读量525

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/u014492098/article/details/41941401

版权

WEB前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

既然说是js没说ajax,那么肯定只是适合于静态数据。如何想要寻找ajax实现联动下拉框的解决方法,那么本文不适你。

1.我们需要需要表单包含一个1级下拉框和2级下拉框。

    <form id="productForm" name="productForm" method="POST" action="">
    <select id="productBigType" name="productBigType" class="productBigType" cssClass="small-input" οnchange="changeSelect(this.value)">
        <option value="0">事件大类</option>
        <option value="1">售前工作分类</option>
        <option value="2">售后工作分类</option>
    </select>
    <select name="productsmallType">
    <option>事件小类</option>
    </select>
    </form>

2.我们需要2级下拉框的数据,我们采用数组进行存储.

var productTypeArr = new Array();
	  productTypeArr[0]=new Array('1','现场交流');
	  productTypeArr[1]=new Array('1','调研');
	  productTypeArr[2]=new Array('1','解决方案');
	  productTypeArr[3]=new Array('1','招标参数');
	  productTypeArr[4]=new Array('1','投标文件');
	  productTypeArr[5]=new Array('1','市场会议');
	  productTypeArr[6]=new Array('1','培训');
	  productTypeArr[7]=new Array('1','演示');
	  productTypeArr[8]=new Array('1','测试');
	  productTypeArr[9]=new Array('1','提交用户的各种文档');
	  productTypeArr[10]=new Array('1','报价');
	  productTypeArr[11]=new Array('2','调研');
	  productTypeArr[12]=new Array('2','项目实施');
	  productTypeArr[13]=new Array('2','排故');
	  productTypeArr[14]=new Array('2','巡检');
	  productTypeArr[15]=new Array('2','测试演示');
	  productTypeArr[16]=new Array('2','技术交流');
	  productTypeArr[17]=new Array('2','编写文档');
	  productTypeArr[18]=new Array('2','会议学习');
	  productTypeArr[19]=new Array('2','认证考试');

3.第三步需要做什么呢。无疑是在下拉框1内容变化的时候对下拉框2的数据进行填充，以得到自己想要选择的内容。

onchange方法就是用来监听下拉框1的数据是否变化的。

4.我们需要一个对下拉框2进行填充的changeSelect方法。

function changeSelect(productId){
		  document.productForm.productsmallType.length=0;
		  if(productId==0)document.productForm.productsmallType.options[0] = new Option('产品分类');
		  for(var i=0;i<productTypeArr.length;i++){
			  if (productTypeArr[i][0] == productId) //这个是用来判断当前下拉框选择的是第几列，用于填充对应数据。
              {document.productForm.productsmallType.options[document.productForm.productsmallType.length] = new Option(productTypeArr[i][1]}             
		  } 
	  }

说明：此方法对数据不大的并且是静态数据相当适合。

完整代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'device_edit.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- Reset Stylesheet -->

	<script type="text/javascript">
	  var productTypeArr = new Array();
	  productTypeArr[0]=new Array('1','现场交流');
	  productTypeArr[1]=new Array('1','调研');
	  productTypeArr[2]=new Array('1','解决方案');
	  productTypeArr[3]=new Array('1','招标参数');
	  productTypeArr[4]=new Array('1','投标文件');
	  productTypeArr[5]=new Array('1','市场会议');
	  productTypeArr[6]=new Array('1','培训');
	  productTypeArr[7]=new Array('1','演示');
	  productTypeArr[8]=new Array('1','测试');
	  productTypeArr[9]=new Array('1','提交用户的各种文档');
	  productTypeArr[10]=new Array('1','报价');
	  productTypeArr[11]=new Array('2','调研');
	  productTypeArr[12]=new Array('2','项目实施');
	  productTypeArr[13]=new Array('2','排故');
	  productTypeArr[14]=new Array('2','巡检');
	  productTypeArr[15]=new Array('2','测试演示');
	  productTypeArr[16]=new Array('2','技术交流');
	  productTypeArr[17]=new Array('2','编写文档');
	  productTypeArr[18]=new Array('2','会议学习');
	  productTypeArr[19]=new Array('2','认证考试');
	  function changeSelect(productId){
		  document.productForm.productsmallType.length=0;
		  if(productId==0)document.productForm.productsmallType.options[0] = new Option('产品分类','选择你要添加的产品分类');
		  for(var i=0;i<productTypeArr.length;i++){
			  if (productTypeArr[i][0] == productId)                    //[0] [1] 第一列 第二列
              {document.productForm.productsmallType.options[document.productForm.productsmallType.length] = new Option(productTypeArr[i][1], productTypeArr[i][2]);}                    
		  } 
	  }
	  var productTypeArr1 = new Array();
	  productTypeArr1[0] = new Array('1','vsphere');
	  productTypeArr1[1] = new Array('1','vcenter');
	  productTypeArr1[2] = new Array('1','esxi');
	  productTypeArr1[3] = new Array('1','view');
	  productTypeArr1[4] = new Array('1','Operation');
	  productTypeArr1[5] = new Array('1','SRM');
	  productTypeArr1[6] = new Array('1','DR/DP');
	  productTypeArr1[7] = new Array('2','NBU');
	  productTypeArr1[8] = new Array('2','BE');
	  productTypeArr1[9] = new Array('2','SSR');
	  productTypeArr1[10] = new Array('2','SF');
	  productTypeArr1[11] = new Array('2','SEP');
	  productTypeArr1[12] = new Array('2','SWG');
	  productTypeArr1[13] = new Array('2','SNAC');
	  productTypeArr1[14] = new Array('2','SDCS');
	  productTypeArr1[15] = new Array('2','DLP');
	  productTypeArr1[16] = new Array('2','SMG');
	  productTypeArr1[17] = new Array('3','单机oracle');
	  productTypeArr1[18] = new Array('3','集群oracle');
	  productTypeArr1[19] = new Array('4','IBM');
	  productTypeArr1[20] = new Array('4','同有');
	  productTypeArr1[21] = new Array('4','HP');
	  productTypeArr1[22] = new Array('4','EMC');
	  productTypeArr1[23] = new Array('4','NetApp');
	  productTypeArr1[24] = new Array('4','华为');
	  productTypeArr1[25] = new Array('4','联想');
	  productTypeArr1[26] = new Array('5','易云通云终端');
	  productTypeArr1[27] = new Array('6','网络交换机');
	  productTypeArr1[28] = new Array('7','光钎交换机');
	  productTypeArr1[29] = new Array('8','其他产品');
	  function changeSelect1(productId){
		  document.productForm1.productsmallType1.length=0;
		  if(productId==0)document.productForm1.productsmallType1.options[0] = new Option('产品分类','选择你要添加的产品分类');
		  for(var i=0;i<productTypeArr1.length;i++){	  
			  if (productTypeArr1[i][0] == productId) //当符合它那一列的时候就创建
              {document.productForm1.productsmallType1.options[document.productForm1.productsmallType1.length] = new Option(productTypeArr1[i][1]);}                    
		  } 
	  }
	function find(){
		alert(document.productForm1.productsmallType1.value);
		
		
	}
	</script>

  </head>
  
  <body>
    <form id="productForm" name="productForm" method="POST" action="">
    <select id="productBigType" name="productBigType" class="productBigType" cssClass="small-input" οnchange="changeSelect(this.value)">
        <option value="0">事件大类</option>
        <option value="1">售前工作分类</option>
        <option value="2">售后工作分类</option>
    </select>
    <select name="productsmallType">
    <option>事件小类</option>
    </select>
    </form>
    <form id="productForm1" name="productForm1" method="POST" action="">
    <select id="productBigType1" name="productBigType1" class="productBigType1" cssClass="small-input" οnchange="changeSelect1(this.value)">
        <option value="0">产品类型</option>
        <option value="1">vmware</option>
        <option value="2">Symantec</option>
        <option value="3">Oracle</option>
        <option value="4">存储</option>
        <option value="5">易云通云终端</option>
        <option value="6">网络交换机</option>
        <option value="7">光钎交换机</option>
        <option value="8">其他产品</option>
    </select>
    <select name="productsmallType1">
    <option>产品名称</option>
    </select>
    </form>
    <input type="button" value="find" οnclick="find()">
  </body>
</html>