JQuery 3级级联,3级联动,3级连动

最新推荐文章于 2020-09-08 15:47:20 发布

weixin_33716941

最新推荐文章于 2020-09-08 15:47:20 发布

阅读量146

点赞数

文章标签： javascript xhtml java ViewUI

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%><%@ taglib uri="/struts-tags" prefix="s" %>
<!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>
<title>jQuery 三级级联</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test select{
  width:100px;
  margin-left:20px;
}
</style>

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/three_select.js" type="text/javascript"></script>
<script src="js/three_select_data.js" type="text/javascript"></script>

</head>
<body>
<s:form action="test!save">
<div id="test"></div>
<s:hidden name="s1" id="s1"></s:hidden>
<s:hidden name="s2" id="s2"></s:hidden>
<s:hidden name="s3" id="s3"></s:hidden>
<s:submit title="ddd"></s:submit>
</s:form>
<script type="text/javascript">
$(document).ready(function(){
$("#test").ThreeSelect("#s1","#s2","#s3");
});
</script>
</body>
</html>

----------------------------------------

$.fn.ThreeSelect = function(id1,id2,id3){
var _self = this;

//default values
_self.data("select_1",["---请选择---", ""]);
_self.data("select_2",["全部", ""]);
_self.data("select_3",["全部", ""]);

//insert 3 empty select
_self.append("<select></select>");
_self.append("<select></select>");
_self.append("<select></select>");

//get values from select
var $sel1 = _self.find("select").eq(0);
var $sel2 = _self.find("select").eq(1);
var $sel3 = _self.find("select").eq(2);

// get default values
var default_s1 = $(id1).attr("value");
var default_s2 = $(id2).attr("value");
var default_s3 = $(id3).attr("value");

//default value from 1st select
if(_self.data("select_1")){
  $sel1.append("<option value='"+_self.data("select_1")[1]+"'>"+_self.data("select_1")[0]+"</option>");
}
$.each( GP , function(index,data){
  $sel1.append("<option value='"+data[1]+"'>"+data[0]+"</option>");
});

//default value from 2nd select
if(_self.data("select_2")){
  $sel2.append("<option value='"+_self.data("select_2")[1]+"'>"+_self.data("select_2")[0]+"</option>");
}
//default value from 3rd select
if(_self.data("select_3")){
  $sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
}

$sel1.val(default_s1);

//1st select control
var index1 = "" ;
$sel1.change(function(){
  //clear 2nd & 3rd select data
  $sel2[0].options.length=0;
  $sel3[0].options.length=0;
  index1 = this.selectedIndex;
  if(index1==0){
   if(_self.data("select_2")){
    $sel2.append("<option value='"+_self.data("select_2")[1]+"'>"+_self.data("select_2")[0]+"</option>");
   }
   if(_self.data("select_3")){
    $sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
   }
  }else{
   if(_self.data("select_2")){
    $sel2.append("<option value='"+_self.data("select_2")[1]+"'>"+_self.data("select_2")[0]+"</option>");
   }
   $.each( GT[index1-1] , function(index,data){
    $sel2.append("<option value='"+data[1]+"'>"+data[0]+"</option>");
   });

   if(_self.data("select_3")){
    $sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
   }
   $.each( GC[index1-1][0] , function(index,data){
    $sel3.append("<option value='"+data+"'>"+data+"</option>");
   });
  }
  $(id1).attr("value", this.value);
  $(id2).attr("value", "");
  $(id3).attr("value", "");
}).change();

//2nd select control
$sel2.val(default_s2);
var index2 = "" ;
$sel2.change(function(){
  $sel3[0].options.length=0;
  index2 = this.selectedIndex;

  if(index2==0){
   if(_self.data("select_3")){
    $sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
   }
  }else{
   if(_self.data("select_3")){
    $sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
   }
   $.each( GC[index1-1][index2-1] , function(index,data){
    $sel3.append("<option value='"+data+"'>"+data+"</option>");
   });
  }

  $(id2).attr("value", this.value);
  $(id3).attr("value", "");
}).change();

$sel3.val(default_s3);
$sel3.change(function(){
  $(id3).attr("value", this.value);
}).change();

return _self;
};

--------------------------------------

var GP =[['安徽','ah'],['澳门','aomen'],['北京','beijing']];

var GT = [
[['合肥','hf1'],['安庆','aq1']],
[['澳门','aomen1']],
[['昌平','changping1'],['海淀','haiding1'],['其他','qita1']]
];

var GC = [
[
['长丰','肥东','肥西','合肥市'],
['安庆市','枞阳','怀宁','潜山','宿松','太湖','桐城','望江','岳西']
],
[ ['澳门'] ],
[
['昌平','朝阳','崇文','大兴','东城','房山','丰台'],
['海淀','怀柔','门头沟','密云','平谷','石景山','顺义'],
['通州','西城','宣武','延庆']
]
];

weixin_33716941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 3级级联,3级联动,3级连动

&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt;&lt;%@ taglib uri="/struts-tags" prefix="s" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD
复制链接

扫一扫