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;
}
类
分享到:
相关推荐
3. **更新联动选择框**:在事件处理函数中,你需要根据`selectedValue`来动态修改第二个选择框的选项。这可能涉及到Ajax请求,从服务器获取新的数据,然后使用Select2的API更新选项: ```javascript $.ajax({ url...
首先,联动菜单的基本概念是:当用户在一个下拉菜单(一级菜单)中选择某个选项时,另一个下拉菜单(二级菜单)的内容会根据所选的选项动态更新。这通常通过监听一级菜单的`change`事件来实现。jQuery提供了方便的...
2. 数据准备:将联动的数据结构化,通常是JSON格式,每个层级对应一个数组,每个元素包含ID和名称,以及可能的子元素数组。 3. JavaScript处理:监听父级`<select>`的`onchange`事件。当事件触发时,根据选定的值...
JavaScript是网页动态交互的核心,通过监听select元素的改变事件,可以实时更新第二个下拉菜单的内容。下面我们将深入探讨这个知识点: 1. **HTML结构**: - 一级select通常命名为`province`,二级select命名为`...
2. **HTML结构**:创建三个`<select>`元素,并给它们设置唯一的ID,例如`province`, `city`, `district`。 3. **初始加载**:页面加载完成后,根据数据填充第一级(省)的`<select>`,并为每个省的选项绑定一个唯一...
在这个场景中,当用户在第一级选择一个选项时,第二级的选择框会根据用户的选择动态更新其可选项,以此类推,实现多级联动的效果。下面将详细解释这一技术的核心概念、实现方法以及相关知识点。 1. HTML基础: 在...
`Select2`是一个流行的jQuery插件,它提供了丰富的功能和自定义选项,使得创建优雅的下拉选择框变得更加简单。本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先,我们需要理解`Select2`...
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
首先,理解“三级联动”的概念:当用户在一级下拉列表(如省份)中选择一个选项时,二级下拉列表(如城市)会根据所选省份动态加载相关数据;同样,当用户在二级列表中选择一个城市后,三级下拉列表(如区县)会根据...
2. **初始化Select2**:引入`Select2`的CSS和JS文件,通过JavaScript对这三个`<select>`元素进行初始化。例如: ```html <link href="css/select2.min.css" rel="stylesheet" /> <script src="js/select2.min.js...
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用!!!
三级联动指的是在一个表单中,当用户在第一级(省)选择后,第二级(市)会自动更新为与所选省相关的选项,接着在市选择后,第三级(区)也会相应更新。这种设计常用于地址输入,以提高用户体验。 2. **HTML5**: ...
本项目就是利用 Select2 插件来实现全国城市三级联动的一个实例。 1. **Select2 插件基础** Select2 是一款可定制的下拉选择框,它扩展了原生 HTML select 元素的功能,提供搜索、多选、分页等多种特性。它的核心...
第二个`<select>`(test2)则有更多的选项,每个都带有"MID"属性,这个属性的值对应于第一个select中的一个值。 JavaScript在这里起到了关键的作用,它负责处理两个select之间的联动逻辑。通过使用`<script>`标签内...
Vue Select 二级联动第二级默认选中第一个 Option 值的实例详解 在本篇文章中,我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值,希望对大家有所帮助。 知识...
1. **HTML结构**:创建两个<select>元素,第一个作为一级菜单,第二个作为二级菜单。初始时,二级菜单为空或显示默认选项。 2. **jQuery绑定事件**:使用jQuery的`change()`事件监听一级菜单的选择变化,当用户选择...
本示例中的"根据JSON自动生成select联动"就是一种利用JSON数据实现多级关联的`select`元素的方法,主要涉及JQuery库和HTML页面的构建。 首先,我们要理解JSON(JavaScript Object Notation)的结构。JSON对象通常...
本话题将详细介绍如何使用select2来实现一个具有省市区三级联动效果的下拉菜单。 首先,我们要理解什么是“级联”或“联动”。在前端开发中,级联通常指的是一个下拉菜单的选择会影响另一个下拉菜单的选项。在这种...