用JSP，jQuery实现两级联动，三级联动的几种方法

最新推荐文章于 2022-01-02 08:21:45 发布

滑头鬼的鬼

最新推荐文章于 2022-01-02 08:21:45 发布

阅读量623

点赞数 1

分类专栏： jsp jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/li15974168626/article/details/106785766

版权

jsp 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

废话不说上代码

HTML文件

两级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框的选择</title>
<script language="javascript" src="select.js"></script>

</head>

<body οnlοad="into()">
<form id="form1" name="form1" method="post" action="">
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="25" colspan="2" align="center">请选择城市</td>
</tr>
<tr>
<td width="50%" height="25" align="center">省份：</td>
<td height="25" align="center"><label for="select"></label>
<select name="selpro" id="select" οnchange="showCity()">
<option value="湖南省">湖南省</option>
<option value="湖北省">湖北省</option>
</select></td>
</tr>
<tr>
<td width="50%" height="25" align="center">城市：</td>
<td height="25" align="center"><label for="select2"></label>
<select name="selcity" id="select2">
</select></td>
</tr>
</table>
</form>
</body>
</html

js文件

// JavaScript Document
//方法一：
/* var selCity = null;
var province = null;
var city = null;
function into(){
   //获得省份
   province = document.form1.selpro;
   //获得城市
   city = document.form1.selcity;
   //创建数组
   selCity = new Array();
   //填充到城市中
   fillCity();
   }

   function fillCity(){
       selCity [0] = "长沙";
       selCity [1] = "岳阳";
       selCity [2] = "黄冈";
       selCity [3] = "合肥";

       }
//核心
function showCity(){
   var cityOption = null;
   //选择省份
   var proName = province.value;
   //清空数组
   city.options.length=0;

   switch(proName){
       case "湖南省":
       cityOption = new Option(selCity[0],selCity[0]);
       //添加到城市
       city.options.add(cityOption);
       cityOption = new Option(selCity[1],selCity[1]);
       //添加到城市
       city.options.add(cityOption);
       break;
       case "湖北省":
       cityOption = new Option(selCity[2],selCity[2]);
       //添加到城市
       city.options.add(cityOption);
       cityOption = new Option(selCity[3],selCity[3]);
       //添加到城市
       city.options.add(cityOption);
       }
   }*/


   //方法二：

   /*var selCity = null;
    var province = null;
    var city = null;
function into(){
   //获得省份
   province = document.form1.selpro;
   //获得城市
   city = document.form1.selcity;
   //创建数组
   selCity = new Array();
   //填充到城市中
   fillCity();
   }

   function fillCity(){
       /*selCity[0] = new Array();
       selCity[0][0] = "长沙";
       selCity[0][1] = "衡阳";
       selCity[1] = new Array();
       selCity[1][0] = "合肥";
       selCity[1][1] = "黄冈";

       //selCity = [["长沙","衡阳"],["合肥", "黄冈"]];
       }
//核心
function showCity(){
   var cityOption = null;
   //选择省份
   var proName = province.selectedIndex;
   console.log(proName);
   //清空数组
   city.options.length=0;
   for(var i=0; i<selCity[proName].length;i++){
       cityOption = new Option(selCity[proName][i],selCity[proName][i]);
       city.options.add(cityOption);
       }
   }*/

   //第三种方法
   var temp = 20;
   var selCity = null;
    var province = null;
    var city = null;
function into(){
   //获得省份
   province = document.form1.selpro;

   //获得城市
   city = document.form1.selcity;
   //创建数组
   selCity = new Array();
   //填充到城市中
   fillCity();
   }

   function fillCity(){
       selCity["湖南省"] = new Array();
       selCity["湖南省"][0] = "长沙";
       selCity["湖南省"][1] = "衡阳";
       selCity["湖北省"] = new Array();
       selCity["湖北省"][0] = "合肥";
       selCity["湖北省"][1] = "黄冈";

       //selCity = [["长沙","衡阳"],["合肥", "黄冈"]];
       }
//核心
function showCity(){
   var cityOption = null;
   //选择省份
   var proName = province.value;
   alert(proName);
   //清空数组
   city.options.length=0;
   for(var i=0; i<selCity[proName].length;i++){
       cityOption = new Option(selCity[proName][i],selCity[proName][i]);
       city.options.add(cityOption);

       arrayMax();
       }
   }


       //求最大值
       /* function arrayMax(){
           var maxNum = this[0];
           for(var i=0; i<this.length;i++){
               if(maxNum<this[i]){
                   maxNum = this[i];
                   }
               }
           return maxNum;
           }
       Array.prototype.arrayMax1 = arrayMax;
       var myArray =new Array(1,5,8,69,100);
       alert(myArray.arrayMax1());
       */

三级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>送货地址</title>
</head>
<script>

var selCity = null;
   var selRegion = null;
    var province = null;
    var city = null;
   var region = null;
   var ProvinceName = null;
   var CityName = null;
   var RegionName = null;
   var streetName = null;
   var doorplateName = null;
   var proName = null;
   var cityName = null;
   var regionName =null;
function send(){
   window.open("receive.html","myson","width=600,height=400");
   //获取省份信息
   ProvinceName = proName;
   //获取城市信息
   CityName = cityName;
   //获取区信息
   RegionName = regionName;
   //获取街道信息
   streetName = document.form1.street.value;
   //获取门牌信息
   doorplateName = document.form1.doorplate.value;

   }

function into(){
   //获得省份
   province = document.form1.selpro;

   //获得城市
   city = document.form1.selcity;
   // h获得区县
   region = document.form1.selregion;
   //创建数组

   selCity = new Array();
   selRegion = new Array();
   //填充到城市中
   fillCity();
   //填充到区中
   fillRegion();
   }

   function fillCity(){

   //建立一维数组储存城市
       selCity["湖南省"] = new Array();
       selCity["湖南省"][0] = "长沙";
       selCity["湖南省"][1] = "岳阳";
       selCity["湖北省"] = new Array();
       selCity["湖北省"][0] = "合肥";
       selCity["湖北省"][1] = "黄冈";

       }
       function fillRegion(){

       //建立一维数组储存区域
   selRegion["长沙"] = new Array();
   selRegion["长沙"][0] = "一区";
   selRegion["长沙"][1] = "二区";
   selRegion["岳阳"] = new Array();
   selRegion["岳阳"][0] = "三区";
   selRegion["岳阳"][1] = "四区";
   selRegion["合肥"] = new Array();
   selRegion["合肥"][0] = "五区";
   selRegion["合肥"][1] = "六区";
   selRegion["黄冈"] = new Array();
   selRegion["黄冈"][0] = "七区";
   selRegion["黄冈"][1] = "八区";
           }

function showCity(){

   //选择省份
   proName = province.value;
   alert(proName);
   //清空数组
   city.options.length=0;
   region.options.length=0;
   for(var i=0; i<selCity[proName].length;i++){
       cityName = new Option(selCity[proName][i],selCity[proName][i]);
       city.options.add(cityName);

       }
   }

function showRegion(){

   cityName = city.value;
   //清空区
   region.options.length=0;
   alert(cityName);
   for(var i=0;i<selRegion[cityName].length;i++){
       regionName = new Option(selRegion[cityName][i],selRegion[cityName][i]);
       region.options.add(regionName);
       }

}
function show(){
   regionName = region.value;
   alert(regionName);
   }
window.οnlοad=into;
</script>
<body >
<form id="form1" name="form1" method="post" action="">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="25" colspan="2" align="center">送货地址确认</td>
</tr>
<tr>
<td width="50%" height="25" align="center">省份:</td>
<td width="50%" height="25" align="center"><select name="selpro" id="select" οnchange="showCity()">
<option value="湖南省" >湖南省</option>
<option value="湖北省" >湖北省</option>
</select></td>
</tr>
<tr>
<td width="50%" height="25" align="center">城市:</td>
<td width="50%" height="25" align="center"><select name="selcity" id="select2" οnchange="showRegion()">
</select></td>
</tr>
<tr>
<td width="50%" height="25" align="center">区：</td>
<td width="50%" height="25" align="center"><select name="selregion" id="select3" οnchange="show()">
</select></td>
</tr>
<tr>
<td width="50%" height="25" align="center">街道：</td>
<td width="50%" height="25" align="center"><input type="text" name="street" id="textfield" value=""/></td>
</tr>
<tr>
<td width="50%" height="25" align="center">门牌号：</td>
<td width="50%" height="25" align="center"><input type="text" name="doorplate" id="textfield2" value=""/></td>
</tr>
<tr>
<td height="25" colspan="2" align="center"><input type="button" name="button" id="button" value="确认" οnclick="send()"/></td>
</tr>
</table>
</form>
</body>
</html>

用jQuery（标签属性都是自己用的）

$(function() {
       $("#tasLagerCategory").change(
               function() {
                   $("#tasSmallCategory").empty();
                   var tasLagerCategoryValue = $("#tasLagerCategory").val();
                   categroySelect = new Array();
                   fillTasSmallCategory();
                   if (tasLagerCategoryValue == "1") {
                       for (var i = 0; i < categroySelect[0].length; i++) {
                           var option = $("<option>").val(i + 11).text(
                                   categroySelect[0][i]);
                           $("#tasSmallCategory").append(option);
                       }
                   }
                   if (tasLagerCategoryValue == "2") {
                       for (var i = 0; i < categroySelect[0].length; i++) {
                           var option = $("<option>").val(i + 16).text(
                                   categroySelect[1][i]);
                           $("#tasSmallCategory").append(option);
                       }
                   }
                   function fillTasSmallCategory() {
                       categroySelect[0] = new Array();
                       categroySelect[0][0] = "入門権限申請";
                       categroySelect[1] = new Array();
                       categroySelect[1][0] = "PW初期化";

                   }
                   ;
               });
   });