联动下拉与选中回显效果

联动下拉与选中回显效果

  <div id="search">
  <form action="IndexServlet" method="post">
  商品搜索：  商品大类
  <select name="bigType" οnchange="change()" id="bigType">
    <option>---请选择---</option>
	   <c:forEach var="big" items="${itemTypes}">
			<!-- 取得当前大类赋给big -->
			<c:if test="${big.pid eq 0}">
				<!-- 所有的大类跟上一次对比，如果一样就选中-->
				<option value="${big.id }" ${param.bigType eq big.id ? "selected" : ""}>${big.name }</option>
			</c:if>
	   </c:forEach>
  </select>
    商品小类
  <select name="smallType" id="smallType">
    <option>---请选择---</option>
  </select>
    关键字【商品名称】<input name="name" type="text" value="${param.name }">
  <input type="submit" value="" class="search_btn"/>
  </form>
  </div>

联动下拉脚本

<script type="text/javascript">

	//方法名为$(id),主要为了模拟jquery,也为了调用方便
   	function $(id){
   		//返回该对象
   		return document.getElementById(id);
   	}
   	
   	function openMyWin(img){
   		
   	}

	function display(id){
		//当不显示时就显示,动态的只能用document对象获取id
		if($(id).style.display == "none"){
			$(id).style.display = "";
		}else{
			$(id).style.display = "none"
		}
	}
	
	var arr = new Array();
	var i = 0;
	//把el表达式存放在js的数组中，才能跟js比较，这里可以先判读过滤掉大类
	//过滤掉大类，有多个值用数组存储
	//这种方式好，只读取一次数据库
	<c:forEach var="small" items="${itemTypes}">
		//数组里再放数组，即二位数组
		arr[i] = new Array(${small.id},"${small.name}",${small.pid});
		i++;
	</c:forEach>
	
	function change(){
		//第一种：清除只剩下1个，该显示为请选择
		//第二种：判断如果是大类为请选择，小类就为请选择
		//后面的就不要执行了，也是一样的，不过还是第一种方便
		smallType.length = 1;
		for(var i = 0 ; i < arr.length ; i++){
			//数组中的pid等于大类的id
			if(arr[i][2] == bigType.value){
				var op = document.createElement("option");
				op.value = arr[i][0];
				op.text = arr[i][1];
				smallType.appendChild(op);
				//上一次的小类跟所有的对比，如果一样则选中
				if(op.value == "${param.smallType}"){
					//这种也可以的
					//op.selected = "selected";
					op.selected = true;
				}
				
				//以对象的方式添加option也可以
				//var op  = new Option(arr[i][1],arr[i][0]);
				//smallType.appendChild(op);
			}
		}
	}
</script>