`
jie2workjava
  • 浏览: 151200 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

select 2个联动

    博客分类:
  • view
阅读更多

1.js

 

 //id|->{s1;[]}
var dicObject = new ActiveXObject("Scripting.Dictionary");
//id|->s1
var dicId = new ActiveXObject("Scripting.Dictionary");

//id中2:->se1  ..dicSon
var dicRele = new ActiveXObject("Scripting.Dictionary");
//空dic
var dicNull = new ActiveXObject("Scripting.Dictionary");
//将array[Dictionary] 显示到 select中
function toOption(selectId,tempDic,valueChecked){
	var select = document.getElementById(selectId);
	var array = (new VBArray(tempDic.Keys())).toArray();
	var count = array.length;
	for(var i=0;i<count;i++){
		var obj = document.createElement("OPTION");
		obj.value = array[i];
		obj.text = tempDic(array[i]);
		if(array[i]==valueChecked)obj.selected = "selected";
		select.add(obj);
	}
}
//清空select中的option
function removeOption(select){
	var count = select.options.length;
	for(var i=count-1;i>=0;i--){
		select.options.remove(i);
	}
}
//去掉两边的括号如[xxxx]--->xxxx
function removeBrackets(string){
	var seltemp = string.slice(1,string.length-1);//去掉[]
	return seltemp;
}
//分离出 Object 到 array
function separateObject(string){
	var arrsuper = string.split(",");      //每个对象一个项
	return arrsuper;
}





//id|->{s1;[]}  dicObject      ---调用
function getDicObject(array){
	var count = array.length;
	for(var i=0;i<count;i++){
		var arrString = array[i];   //每一项对象
		var arrsuper = arrString.split("|->");
		var index = arrsuper.length;
		if(index>=2)      //id        后面
			dicObject.add(trem(arrsuper[0]),trem(arrsuper[1]));
		else if(index==1)
			dicObject(trem(arrsuper[0]),"");
	}
}
//id|->s1                         ---显示
function getDicId(array){
	var count = array.length;
	for(var i=0;i<count;i++){
		var arrString = array[i];   //每一项对象
		var arrsuper = arrString.split("|->");
		if(arrsuper.length<1)continue;
		var temp = removeBrackets(arrsuper[1]);
		var temparr = temp.split(";");
		if(temparr.length>0)dicId.add(trem(arrsuper[0]),trem(temparr[0]));
	}
}
//id|->{s1;[]}中2:->se1   array={s1;[2:->se1#1:->se1#]}  ---调用
function getDicSon(string){
		//id|->{s1;[]}中2:->se1
		var dicSon = new ActiveXObject("Scripting.Dictionary");
		var temp = removeBrackets(string);
		
		var temparr = temp.split(";");
		if(temparr.length<2)return;
		
		var newtemp = removeBrackets(temparr[1]); //son object
		var newtemparr = newtemp.split("#");
		var newcount = newtemparr.length;
		
		for(var j=0;j<newcount;j++){
			var newarrString = newtemparr[j];   //每一项对象的集合
			var newarrsuper = newarrString.split(":->");
			if(newarrsuper.length<1)continue;
			if(newarrsuper.length>1)dicSon.add(trem(newarrsuper[0]),trem(newarrsuper[1]));
		}
		return dicSon;
}
//id中2:->se1  ..dicSon
function getDicRele(array){
	if(dicObject.Count<1)getDicObject(array);
	var dicObjectKeys = (new VBArray(dicObject.Keys())).toArray();
	var count = dicObjectKeys.length;
	for(var i=0;i<count;i++){
		var arrString = dicObject(trem(dicObjectKeys[i]));   //value
		var sonDic = getDicSon(arrString);
		dicRele.add(trem(dicObjectKeys[i]),sonDic);
	}
}
//

function showAll(selectValue,se1,se2){
	var string = removeBrackets(list);
	var array = separateObject(string);  //object
	if(selectValue==null||trem(selectValue)==""){
		getDicId(array);
		getDicRele(array);
		var a = (new VBArray(dicRele.Items())).toArray();
		toOption(se1,dicId);
		toOption(se2,a[0]);
	}else{
		removeOption(document.getElementById(se1));
		removeOption(document.getElementById(se2));
		toOption(se1,dicId,selectValue);
		toOption(se2,dicRele(trem(selectValue)));
	}
	
}

function selectOnChange(tag,se1,se2){
	var value = tag.value;
	showAll(value,se1,se2);
}
//去掉空格(两边)
function trem(str){
	var str1 = rtrem(str);
	var string = ltrem(str1);
	return string;
}
//去掉左边空格
function ltrem(str){
	var count = str.length;
	var seltemp = "";
	for(var i=0;i<count;i++){
		var s = str.charAt(i);
		if(s!=" "){seltemp = str.slice(i,count);break;}
	}
	return seltemp;
}
//去掉右边空格
function rtrem(str){
	var count = str.length;
	var seltemp = "";
	for(var i=count-1;i>=0;i--){
		var s = str.charAt(i);
		if(s!=" "){seltemp = str.slice(0,i+1);break;}
	}
	return seltemp;
}

 

2.html

 

<script type="text/javascript"  src="select/select2.js"></script>
<script type="text/javascript">
                list = "${list}";
	function onload(){
                     showAll(null,"se1","se2");
	}
</script>

......
<body onload="onload()">
......

 <select id="se1"  onchange="selectOnChange(this,'se1','se2')">
  </select>
  <select id="se2">
  </select>

 

3.java---显示的

public class SelectEntity {
	private Integer id;
	private String name;
	private Set<SelectEntity>  selectEntity;


。。。
@Override
	public String toString() {
		// TODO Auto-generated method stub
		String str = "";
		str += this.id+"|->{"+this.name+";[";
		for(SelectEntity se:this.selectEntity){
			str += se.getId()+":->";
			str += se.name;
			str += "#";
		}
		str += "]}";
		return str;
	}

 类

 

 

 

 

分享到:
评论

相关推荐

    select2插件联动查询用到的css和js文件

    3. **更新联动选择框**:在事件处理函数中,你需要根据`selectedValue`来动态修改第二个选择框的选项。这可能涉及到Ajax请求,从服务器获取新的数据,然后使用Select2的API更新选项: ```javascript $.ajax({ url...

    jquery select二级联动菜单

    首先,联动菜单的基本概念是:当用户在一个下拉菜单(一级菜单)中选择某个选项时,另一个下拉菜单(二级菜单)的内容会根据所选的选项动态更新。这通常通过监听一级菜单的`change`事件来实现。jQuery提供了方便的...

    select多级动态联动

    2. 数据准备:将联动的数据结构化,通常是JSON格式,每个层级对应一个数组,每个元素包含ID和名称,以及可能的子元素数组。 3. JavaScript处理:监听父级`&lt;select&gt;`的`onchange`事件。当事件触发时,根据选定的值...

    select二级联动

    JavaScript是网页动态交互的核心,通过监听select元素的改变事件,可以实时更新第二个下拉菜单的内容。下面我们将深入探讨这个知识点: 1. **HTML结构**: - 一级select通常命名为`province`,二级select命名为`...

    select三级联动

    2. **HTML结构**:创建三个`&lt;select&gt;`元素,并给它们设置唯一的ID,例如`province`, `city`, `district`。 3. **初始加载**:页面加载完成后,根据数据填充第一级(省)的`&lt;select&gt;`,并为每个省的选项绑定一个唯一...

    js select多级联动

    在这个场景中,当用户在第一级选择一个选项时,第二级的选择框会根据用户的选择动态更新其可选项,以此类推,实现多级联动的效果。下面将详细解释这一技术的核心概念、实现方法以及相关知识点。 1. HTML基础: 在...

    Select2实现全国省市区三级联动下拉菜单

    `Select2`是一个流行的jQuery插件,它提供了丰富的功能和自定义选项,使得创建优雅的下拉选择框变得更加简单。本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先,我们需要理解`Select2`...

    最简单js代码实现select二级联动下拉菜单

    本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 &lt;&#37;@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;&#37; String path = request.getContextPath()...

    js 省市区select 三级联动(全国城市三级联动下拉列表)

    首先,理解“三级联动”的概念:当用户在一级下拉列表(如省份)中选择一个选项时,二级下拉列表(如城市)会根据所选省份动态加载相关数据;同样,当用户在二级列表中选择一个城市后,三级下拉列表(如区县)会根据...

    select2三级联动省市区

    2. **初始化Select2**:引入`Select2`的CSS和JS文件,通过JavaScript对这三个`&lt;select&gt;`元素进行初始化。例如: ```html &lt;link href="css/select2.min.css" rel="stylesheet" /&gt; &lt;script src="js/select2.min.js...

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...

    二级下拉列表联动 select 网页 html5

    二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用!!!

    移动端mobileSelect省市区三级联动demo及省市区数据

    三级联动指的是在一个表单中,当用户在第一级(省)选择后,第二级(市)会自动更新为与所选省相关的选项,接着在市选择后,第三级(区)也会相应更新。这种设计常用于地址输入,以提高用户体验。 2. **HTML5**: ...

    全国城市联动(select2插件)

    本项目就是利用 Select2 插件来实现全国城市三级联动的一个实例。 1. **Select2 插件基础** Select2 是一款可定制的下拉选择框,它扩展了原生 HTML select 元素的功能,提供搜索、多选、分页等多种特性。它的核心...

    Select 筛选 联动

    第二个`&lt;select&gt;`(test2)则有更多的选项,每个都带有"MID"属性,这个属性的值对应于第一个select中的一个值。 JavaScript在这里起到了关键的作用,它负责处理两个select之间的联动逻辑。通过使用`&lt;script&gt;`标签内...

    vue select二级联动第二级默认选中第一个option值的实例

    Vue Select 二级联动第二级默认选中第一个 Option 值的实例详解 在本篇文章中,我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值,希望对大家有所帮助。 知识...

    Jquery实现的的动态无刷新的二级联动菜单

    1. **HTML结构**:创建两个&lt;select&gt;元素,第一个作为一级菜单,第二个作为二级菜单。初始时,二级菜单为空或显示默认选项。 2. **jQuery绑定事件**:使用jQuery的`change()`事件监听一级菜单的选择变化,当用户选择...

    根据JSON自动生成select联动

    本示例中的"根据JSON自动生成select联动"就是一种利用JSON数据实现多级关联的`select`元素的方法,主要涉及JQuery库和HTML页面的构建。 首先,我们要理解JSON(JavaScript Object Notation)的结构。JSON对象通常...

    select2 省市区 级联 下拉菜单

    本话题将详细介绍如何使用select2来实现一个具有省市区三级联动效果的下拉菜单。 首先,我们要理解什么是“级联”或“联动”。在前端开发中,级联通常指的是一个下拉菜单的选择会影响另一个下拉菜单的选项。在这种...

Global site tag (gtag.js) - Google Analytics