js基于json的级联下拉框

级联下拉列表是项目中常用到的。比如省市县,比如企业性质等,做成一个js通用组件,

在静态页出来后可以直接插入,将数据和html静态页做一个解耦。

贴出来抛砖引玉吧。

<html>
<script type="text/javascript">
/**  基于json的级联下拉列表,支持初始化
   调用eg:
       var comboselect = ComboSelectFactory(data, ‘p1‘, ‘p2‘, ‘p3‘, ‘p4‘);

   设定下拉列表value,text,parentid名称的方法eg:
    comboselect.setProperties({id:‘id‘,text:‘text‘,parentid:‘parentid‘,defaultvalue:‘defaultvalue‘});

   初始化下拉列表集合的方法eg:
    comboselect.initSelect(‘gd‘);
 */

var ComboSelectFactory = function(data){
    var comboselect = new ComboSelect(arguments);
    return comboselect;
}

var ComboSelect = function(data){
    this.myData = [].slice.call(data, 0, 1)[0];
    this.ids = [].slice.call(data, 1);
    this.setProperties({});

}

ComboSelect.prototype.setProperties = function(opt){
    this.defaultvalue = opt.defaultvalue || ‘-‘;
    this.id = opt.id || ‘id‘;
    this.text = opt.text || ‘categoryname‘;
    this.parent = opt.parent || ‘parentid‘;

    for(var i=0, len=this.ids.length-1; i<len; i++){
        var o = this.$(this.ids[i]);
        this.addEventHandler(o, ‘change‘, this.eventHandle(o,i));
    }

    this.initChild(null, 0);
}

ComboSelect.prototype.eventHandle = function(o,i) {
    var self = this;
    var oreg=o;
    var index=i+1;
    return function() {
        self.initChild(oreg, index);
    }
}

ComboSelect.prototype.initChild = function(oSelect, index){
    var p = null == oSelect ? this.defaultvalue : oSelect.options[oSelect.selectedIndex].value;
    var ds = this.getChilds(p);
    this.clearSelect(index);
    var child = this.$(this.ids[index]);
    for(var i=0, len=ds.length; i<len; i++){
        var currentObj = ds[i];
        child.options[child.length] = new Option(currentObj[this.text], currentObj[this.id]);
    }
}

ComboSelect.prototype.clearSelect = function(index) {
    for(var i=index, len=this.ids.length; i<len; i++){
        this.$(this.ids[i]).length=1;
    }
}

ComboSelect.prototype.getChilds = function(p) {
    var childs = [];
    for(var i=0, len=this.myData.length; i<len; i++){
        if(p == this.myData[i][this.parent]){
            childs.push(this.myData[i]);
        }
    }
    return childs;
}

ComboSelect.prototype.initSelect = function(id){
    var parentids = [];
    parentids = this.getParent(id);
    for (var i=0, len=this.ids.length; i<len; i++){
        if(i==0){
            this.initChild(null, 0);
        }else{
            this.initChild(this.$(this.ids[i-1]),i);
        }
        this.$(this.ids[i]).value = parentids[i][this.id];
    }
}

ComboSelect.prototype.getParent = function(id) {
    var parents = [];
    for(var i=0, len=this.myData.length; i<len; i++){
        if(id == this.myData[i][this.id]){
            if(this.myData[i][this.parent] == this.defaultvalue){
                parents.push(this.myData[i]);
                break;
            }else{
                parents = this.getParent(this.myData[i][this.parent]);
                parents.push(this.myData[i]);
            }
        }
    }
    return parents;
}

ComboSelect.prototype.$ = function(sid) {
    return document.getElementById(sid);
}

ComboSelect.prototype.addEventHandler = function(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
}

/*-- 扩展的级联 ---------------------------*/
    var data = [];

    data.push({id:‘cn‘, text:‘中国‘, parentid:‘-‘});

    data.push({id:‘fj‘, text:‘福建‘, parentid:‘cn‘});
    data.push({id:‘gd‘, text:‘广东‘, parentid:‘cn‘});

    data.push({id:‘fz‘, text:‘福州‘, parentid:‘fj‘});
    data.push({id:‘xm‘, text:‘厦门‘, parentid:‘fj‘});
    data.push({id:‘ly‘, text:‘龙岩‘, parentid:‘fj‘});

    data.push({id:‘fz-fq‘, text:‘福州1‘, parentid:‘fz‘});
    data.push({id:‘fz-mh‘, text:‘福州2‘, parentid:‘fz‘});
    data.push({id:‘fz-cl‘, text:‘福州3‘, parentid:‘fz‘});

    data.push({id:‘xm-dn‘, text:‘厦门1‘, parentid:‘xm‘});
    data.push({id:‘xm-jm‘, text:‘厦门2‘, parentid:‘xm‘});
    data.push({id:‘xm-xl‘, text:‘厦门3‘, parentid:‘xm‘});

    data.push({id:‘yl-xl‘, text:‘龙岩1‘, parentid:‘ly‘});
    data.push({id:‘yl-lc‘, text:‘龙岩2‘, parentid:‘ly‘});
    data.push({id:‘yl-sh‘, text:‘龙岩3‘, parentid:‘ly‘});
    data.push({id:‘yl-wp‘, text:‘龙岩4‘, parentid:‘ly‘});

    data.push({id:‘gz‘, text:‘广州‘, parentid:‘gd‘});
    data.push({id:‘sz‘, text:‘深圳‘, parentid:‘gd‘});
    data.push({id:‘mx‘, text:‘梅县‘, parentid:‘gd‘});

    data.push({id:‘gz-fq‘, text:‘广州1‘, parentid:‘gz‘});
    data.push({id:‘gz-mh‘, text:‘广州2‘, parentid:‘gz‘});
    data.push({id:‘gz-cl‘, text:‘广州3‘, parentid:‘gz‘});

    data.push({id:‘sz-dn‘, text:‘深圳1‘, parentid:‘sz‘});
    data.push({id:‘sz-jm‘, text:‘深圳2‘, parentid:‘sz‘});
    data.push({id:‘sz-xl‘, text:‘深圳3‘, parentid:‘sz‘});

    data.push({id:‘mx-xl‘, text:‘梅县1‘, parentid:‘mx‘});
    data.push({id:‘mx-lc‘, text:‘梅县2‘, parentid:‘mx‘});
    data.push({id:‘mx-sh‘, text:‘梅县3‘, parentid:‘mx‘});
    data.push({id:‘mx-wp‘, text:‘梅县4‘, parentid:‘mx‘});

    data.push({id:‘am‘, text:‘美国‘, parentid:‘-‘});

    data.push({id:‘ny‘, text:‘纽约‘, parentid:‘am‘});
    data.push({id:‘hsd‘, text:‘华盛顿‘, parentid:‘am‘});

function makeArray(arg1, arg2){
    return [ this, arg1, arg2 ];
}
//在onload后执行
window.onload = function() {
    comboselect = ComboSelectFactory(data, ‘p1‘, ‘p2‘, ‘p3‘, ‘p4‘);
    comboselect.setProperties({id:‘id‘,text:‘text‘});
}
</script>
<body>
    <select id="p1"><option>-选择-</option></select><br/>
    <select id="p2"><option>-选择-</option></select><br/>
    <select id="p3"><option>-选择-</option></select><br/>
    <select id="p4"><option>-选择-</option></select>
</body>  

</html>
时间: 2024-10-07 05:26:43

js基于json的级联下拉框的相关文章

jquery级联下拉框

$(document).ready(function(){     //找到三个下拉框     var carnameSelect = $(".carname").children("select");     var cartypeSelect = $(".cartype").children("select");     var wheeltypeSelect = $(".wheeltype").chi

JQuery和ASP.NET分别实现级联下拉框效果

在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuery和select来实现汽车厂商和汽车类型的联动 效果图:       逻辑分析图: html代码: [html] view plain copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

本示例演示如何通过Struts2框架提供的标签,简单地实现【级联下拉框】

1.发布房屋表单页面的级联下拉框如下: 2.     进入发布页面前需要查询下拉框数据,Action代码如下: 3.     房屋发布页面JSP代码如下: <s:doubleselect>标签的属性说明: list:                     一级下拉框的数据来源集合,和Action中集合名称一样 listKey:              一级下拉框数据集合中的实体,作为value的属性名 listValue:           一级下拉框数据集合中实体,作为text的属性名

自己编写jQuery插件 之 无限级联下拉框

因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的.每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加. 插件的实现代码如下: (function ($) { $.fn.CascadingSelect = function (options) { //默认参数设置

js生成tree形组织机构下拉框

1.首先我们正常数据是如下所示: [ { id: 1, pid: 0, name: '公司组织' }, { id: 2, pid: 1, name: '总经办' }, { id: 3, pid: 1, name: '人事部' }, { id: 4, pid: 1, name: '生产部' }, { id: 5, pid: 4, name: '现场组' }, { id: 6, pid: 4, name: '组装组' }, ] 2.我们最好在后台组装成json格式数据,如下显示: [ { id: 1

一点点关于JS的东西:EasyUI布局+下拉框之个人简单使用

根据项目需要,自己写的一个小小demo:实现的简单效果是这样子的,通过下拉框选择数据项,点击页面Button触发,根据下拉框值加载选显卡Tbs. html代码如下: 一个下拉框,一个button,一个空的tbs,两个隐藏内容div(可以动态合成). <select id="Model" class="easyui-combobox" name="Model" style="width:250px;">      

Struts2 &lt;s:doubleselect&gt;级联下拉框 详解析

运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language="java" contentType="text/html; charset=gb2312"pageEncoding="gb2312"%> <%@ taglib prefix="s" uri="/struts-tags&qu

js+servlet实现百度搜索栏下拉框的实现

前端代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #mydiv { position: absolute; left: 50%; top: 50%; margin-left: -200p

JavaScript实现级联下拉框

<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 级联菜单 </tit