jQuery:下拉列表的联动

时间:2023-01-12 15:24:49

<%@ 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 'xialakuang.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<style type="text/css">
.one{
  float:left;
}
.two{
  float:left;
  width:200px;
  height:100px;
  border:1px red dashed;
  margin-left:10px;
  color:green;
}
</style>
<script type="text/javascript">
  $(function(){
  function lyz(e){    //下拉列表初始化
    $(e).html("<option>请选择</option>");
}
var data = {
  山东:{济南:"槐荫区,长清区,高新区,天桥区",烟台:"莱山区,福山区,芝罘区"},
  河北:{衡水:"枣强县,新河县",石家庄:"鹿泉区,栾城区"},
  河南:{郑州:"温县,新密市",许昌:"扶沟县,太康县"}
  };
  //遍历数据增加省份项
  $.each(data,function(a){
    $(".sheng").append("<option>"+a+"</option>");
  });
  //alert("aaa");

  //省份列表框改变事件
  $(".sheng").change(function(){
    lyz(".cheng");    //城市的下拉框初始化
    lyz(".xian");      //县级的下拉框初始化

  // index value
  $.each(data,function(a,b){

  if($(".sheng option:selected").text() == a){ //如果省份选中项与数据匹配
  //alert(a);
  $.each(b,function(c,d){ //遍历数组
    $(".cheng").append("<option>"+c+"</option>"); //增加城市项
  });
  //城市列表项改变事项
  $(".cheng").change(function(){
    lyz(".xian");

  $.each(b,function(c,d){ //遍历数据
  if($(".cheng option:selected").text() == c){ //如果城市选中项与数据匹配
    //alert(c);
    $.each(d.split(","),function(){     //遍历数组增加型号项, split()方法用于把一个字符串分割成字符串数组
      $(".xian").append("<option>"+this+"</option>");
    });
    }
    });
    });
    }
    });
});
$(".one").click(function(){
  var aa="您选择的省份:";
  aa += $(".sheng option:selected").text()+"<br/>";
  aa += "您选择的城市是:";
  aa += $(".cheng option:selected").text()+"<br/>";
  aa += "您选择的县区是:";
  aa += $(".xian option:selected").text()+"<br/>";
  $(".two").append(aa);
});

});
</script>
</head>

<body>
省份:<select class="sheng"><option>请选择</option></select>
城市:<select class="cheng"><option>请选择</option></select>
县级:<select class="xian"><option>请选择</option></select><br/><br/>
<button class="one">输出</button>
<div class="two"></div>
</body>
</html>