JavaScript实现三级级联特效实例分享

本文主要介绍了javascript实现三级级联特效,选择省会出现相应的县下拉框,同时市的下拉框改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

nbsp;html>                        //二维数组存放市的信息      var shi =[["丽水市","杭州市"],["新乡","郑州"]];       //三维数组存放县的信息      var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];      //所选的省值    var proIndex = 0;      function sgc(){        //获得所选择的省的下拉框值     var pro = document.getElementById("sheng");       //获得市的下拉框     var cit = document.getElementById("shi");       //将省的value与市的一维数组下标所对应     proIndex = pro.value-1;    //清空市下拉框中原有的值        cit.options.length = 1;        //通过for循环往下拉框中添加市的信息        for(var i = 0;i < shi[proIndex].length;i++){          var op = document.createElement("option");          var citName = document.createTextNode(shi[proIndex][i]);          op.value = i;          op.appendChild(citName);          cit.appendChild(op);                  }            }   //市的值改变后改变县的值      function sic(){        var are = document.getElementById("xian");        var cit = document.getElementById("shi");        are.options.length = 1;    //通过proIndex获得所选的省的值作为县的数组的一维数组下标,通过cit.value作为县数组的二维数组下标,遍历获得数组值        for(var i = 0;i<xianes[proIndex][cit.value].length;i++){          var op = document.createElement("option");          var areName = document.createTextNode(xianes[proIndex][cit.value][i]);          op.value = i;          op.appendChild(areName);          are.appendChild(op);        }      }      //onchange():控件的value值改变后调用方法          ----省份---      浙江省      河南省              ---市区---              ---县区---      

登录后复制

相关推荐:

Ajax实现省市区三级级联详解

详解iframe制作三级级联菜单

php实现三级级联下拉框 多选下拉框 下拉框插件 下拉框代

立即学习“Java免费学习笔记(深入)”;

以上就是JavaScript实现三级级联特效实例分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2790418.html

(0)
上一篇 2025年3月8日 18:56:32
下一篇 2025年2月23日 15:13:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js快速搭建图书管理平台实例

    vue.js是当下很火的一个javascript mvvm(model-view-viewmodel)库,它是以数据驱动和组件化的思想构建的。相比于angular.js,vue.js提供了更加简洁、更易于理解的api,使得我们能够快速地上手…

    2025年3月8日
    200
  • 浏览器调试动态js脚本的方法图解教程

    本文主要介绍了浏览器调试动态js脚本的方法,文中给大家带来两种调试方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。 前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js…

    2025年3月8日 编程技术
    200
  • JS实现碰撞检测实例详解

    本文主要介绍了js实现碰撞检测的方法,结合实例形式分析了javascript碰撞检测的原理与相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下: 一个简单的碰撞检测例…

    2025年3月8日
    200
  • node.js文件上传重命名以及移动位置详解

    本篇文章主要介绍了node.js文件上传重命名以及移动位置的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 一个关于node上传文件的例子,下面是前端代码,  doUpload() {  var for…

    编程技术 2025年3月8日
    200
  • Vue.js的组件和模板详解

    指令是vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为dom行为。下面通过本文给大家分享vue.js的组件和模板,需要的朋友参考下吧,希望能帮助到大家。 摘要: 指令是Vue.js中一个重要的特性, 主要提供了一种机制将…

    2025年3月8日 编程技术
    200
  • JS获取数组中出现次数最多元素的方法详解

    本文主要介绍了js获取数组中出现次数最多及第二多元素的方法,涉及javascript针对数组的遍历、排序、判断、查询等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 整型数组中出现次数最多和第二多的元素 用哈希数组 function…

    2025年3月8日
    200
  • JavaScript优先队列与循环队列实例详解

    本文主要介绍了javascript数据结构之优先队列与循环队列,结合实例形式较为详细的分析了javascrip数据结构中优先队列与循环队列的原理、定义与使用方法,需要的朋友可以参考下,希望能帮助到大家。 优先队列 实现一个优先队列:设置优先…

    2025年3月8日
    200
  • JavaScript实现报警器提示音效果详解

    本文主要给大家分享分享一段代码基于javascript实现报警器提示音效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。 原型图: 项目需求: 服务器接受到报警后将消息推送到前台,(通过前端实时消息提示的效果-webs…

    2025年3月8日
    200
  • JavaScript双向链表定义与使用方法

    本文主要介绍了javascript数据结构之双向链表定义与使用方法,简单介绍了双向链表的原理,并结合实例形式分析了双向链表的定义与使用方法,需要的朋友可以参考下,希望能帮助到大家。 双向链表和普通链表的区别在于,在链表中,一个节点只有链向下…

    2025年3月8日
    200
  • js通过Date对象实现倒计时动画效果实例分享

    本文主要为大家详细介绍了js通过date对象实现倒计时动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 js通过Date对象实现倒计时效果,具体内容如下 nbsp;html>    倒计时动画   p{ …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论