`

select 多级联动

 
阅读更多

地区:<select id="drpProvince"></select> - <select id="drpCity"></select> - <select id="drpArea"></select>
<script type="text/javascript">
    //联动select数组
    var arrSelect = new Array(document.getElementById("drpProvince"), document.getElementById("drpCity"), document.getElementById("drpArea"));
    //多围数组数据,四围分别保存id、父级id、显示文本、文本值
    var arrData = new Array(
        <!--[999999,0,'--请选择--',''],[999998,999999,'--请选择--',''],[999997,999998,'--请选择--',''],-->
        [1,0,'北京','1'],[2,1,'北京','2']
        ,[3,0,'湖南','3'],[4,3,'长沙','4'],[5,3,'株洲','5'],[6,3,'湘潭','6'],[7,6,'岳塘区','7'],[8,6,'雨湖区','8'],[9,6,'河塘区','9']
        ,[10,0,'广东','10'],[11,10,'广州','11'],[12,10,'佛山','12'],[13,11,'天河区','13'],[14,11,'番禺区','14'],[15,11,'越秀区','15'],[16,12,'南山区','16'],[17,12,'蝉城区','17']
    );
    //默认值数组
    var arrDefault = new Array('10' ,'11' ,'13');
    //初始化主函数
    function arrInit(strInitID, arrSelect, arrMatrix, arrDefValue) {
        function doChange(iIndex) {
            var iCount = 0;
            var sParentID = strInitID;
            if (iIndex > 0) sParentID = arrSelect[iIndex - 1].options[arrSelect[iIndex - 1].selectedIndex].ID;
            with (arrSelect[iIndex]) {
                length = 0;
                options[iCount++] = new Option('--所有--', '0', false, true);
                for (var i = 0; i < arrMatrix.length; i++) {
                    if (String(arrMatrix[i][1]) == String(sParentID)) {
                        var oNewOption = new Option(arrMatrix[i][2], arrMatrix[i][3], false, false);
                        oNewOption.ID = arrMatrix[i][0];
                        options[iCount++] = oNewOption;
                        if(arrMatrix[i][3] == arrDefValue[iIndex])options[iCount - 1].selected = true;
                    };
                };
                /* if (iCount == 0) { //列表数为0则新增默认项
                    var oNull = new Option("--", null, false, true);
                    oNull.ID = "_0x" + (new Date()).getTime();
                    options[0] = oNull;
                };*/
                
                //联动改变所有子select
                if (++iIndex < arrSelect.length) doChange(iIndex);
            };
        };
        if (!arrDefValue) arrDefValue = [];
        for (var i = 0; i < arrSelect.length - 1; i++) {
            eval("arrSelect[" + i + "].onchange = function(){ doChange(" + (i + 1) + "); };");
        }
        doChange(0);
        //只有第一次调用初始化主函数arrInit才使用默认值,之后手动选择不受默认值限制,因此清空。
        arrDefValue = [];
    };
    arrInit(0,arrSelect,arrData,arrDefault);
</script>
 
分享到:
评论

相关推荐

    js select多级联动

    在JavaScript编程中,"js select多级联动"是一种常见的交互设计技术,主要用于创建具有层级关系的下拉选择框。这种技术常用于展示如地区选择、组织结构或产品分类等具有层次结构的数据。在这个场景中,当用户在第一...

    jquery cxselect联动插件select多级联动下拉菜单

    jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单

    select多级动态联动

    在网页开发中,"select多级动态联动"是一种常见的交互设计技术,主要用于创建层次结构的数据展示,例如省市区选择、类别筛选等。这种技术通过JavaScript、jQuery或更现代的前端框架如Vue、React来实现,使得用户在...

    ajax json select 多级联动

    以上就是使用Ajax、JSON和`&lt;select&gt;`实现多级联动的基本流程。在实际项目中,可能还需要考虑错误处理、数据缓存、性能优化等问题。同时,随着前端技术的发展,现代框架如React、Vue等提供了更高效、更便捷的方式来...

    Select-下拉列表多级联动

    在下拉列表多级联动中,Prototype可能会被用来监听`&lt;select&gt;`元素的`change`事件,然后根据用户的选取更新其他下拉列表的内容。 3. **linkage.js**:这是一个自定义的JavaScript脚本,负责实现下拉列表的联动逻辑。...

    JavaScript 多级联动select

    ### JavaScript 多级联动 Select 实现详解 在前端开发中,多级联动 Select 是一个常见的需求,尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select,包括其核心...

    静态二级联动 select option

    静态二级联动 js 调取数据 带有 option 值

    Bootstrap实现下拉菜单多级联动

    多级联动下拉菜单则是在这种基本下拉菜单的基础上增加了层级结构,使得用户可以通过一个菜单项触发多个级联的子菜单,从而提供更加丰富的导航体验。 要实现Bootstrap的下拉菜单多级联动,首先需要确保引入了...

    javascript html js 自定义多级联动下拉菜单,自定义select联动

    在JavaScript、HTML和JS的世界里,自定义多级联动下拉菜单是一种常见的交互设计,它通常用于提升用户体验,尤其是在处理复杂的数据层级结构时。本文将深入探讨如何利用这些技术实现自定义的select联动效果。 首先,...

    省市区 ajax多级联动 select

    在网页开发中,"省市区 ajax多级联动 select" 是一种常见的交互设计,主要用于用户填写地址信息时,通过联动下拉框的方式展示省、市、区的层级结构。这种功能通常利用 AJAX(异步JavaScript和XML)技术实现,与...

    cxSelect多级联动下拉菜单

    【cxSelect多级联动下拉菜单】是一种常见的前端交互设计,常用于网站表单或筛选功能,让用户在多个相关选项间进行逐级选择。这种菜单结构可以帮助用户在大型数据集或层级关系中快速找到目标,常见于地区选择、分类...

    多级联动菜单自动生成代码

    这是一个多级联运菜单自动生成程序,很好用的只要你输入你想要的几级数就可以自动生成了

    很好用的多级联动

    在提供的文件列表中,`selectArea.html`很可能是实现这个多级联动选择器的HTML页面,它包含了相关的HTML结构和可能的JavaScript绑定事件。HTML文件通常会包含若干个`&lt;select&gt;`元素,每个`&lt;select&gt;`代表一个级别的...

    bootstrap-select多级搜索框

    由于业务需要,本代码是由bootstrap 的select改编而成,支持下拉菜单(单选 多选),并且支持有多级菜单,比之前使用3级联动使用方便,代码简单,下载后解压,查看demo.html ,可直接套用.

    ajax多级联动菜单

    【Ajax多级联动菜单】是一种常见的前端交互设计,它允许用户在选择某个菜单项时,自动更新下一级菜单的内容,以此类推,实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景,为用户提供更加...

    Web数据多级联动

    在Web开发中,多级联动是指在一个表单中通过选择一个选项来动态加载下一个级别的选项列表。这种交互方式常见于地区选择器(例如省份-城市-区县)、分类选择器等场景。本文将详细介绍如何使用PHP与MySQL数据库技术...

    JS多级联动下拉列表(自定义级数)

    在网页开发中,多级联动下拉列表是一种常见的交互元素,尤其在处理地理位置选择或层级分类时非常实用。本文将详细介绍如何使用原生JavaScript实现一个可自定义级数的多级联动下拉列表,以及如何根据提供的"demo"文件...

    json实现多级联动

    在本话题中,我们将探讨如何利用JSON来实现多级联动的效果,这是一种常见的前端交互功能,例如在选择省份后自动更新城市选项,或者在选择类别后显示子类别的选项。 多级联动通常涉及到多个下拉框或列表,它们之间...

    JS下拉框多级联动--出生日期和世界各国

    ### JS下拉框多级联动实现——出生日期与世界各国选择 #### 一、概述 本文档将详细介绍如何使用JavaScript实现下拉框的多级联动功能,具体应用在两个场景:一是用户选择出生日期(年、月、日);二是用户选择国籍...

    基于vuejs的多级联动地址选择器

    本篇文章将详细讲解如何利用Vue.js实现一个基于多级联动的地址选择器,同时也会涉及一些CSS相关的技巧,以帮助开发者创建更美观且功能丰富的界面。 首先,我们要理解多级联动地址选择器的基本概念。它通常由省、市...

Global site tag (gtag.js) - Google Analytics