JQuery

【JQuery】如何实现jQuery实现下拉框二级联动

2020-12-09 19:48发布

站内问答 / Java
3328 7 7
发送
7条回答
kitidog2016
2楼 · 2020-12-10 09:45

jQuery其实就是对js的封装，有两种办法解决你的问题：

1、给城市下拉框添加onchange事件，当城市下拉框发生改变，获取改变后的城市id，然后发送请求到后台去查询多对应的分支公司，并替换页面分支公司下拉框的数据，第一次加载页面时默认分支公司下拉框默认对应城市下拉框第一个城市下的分支公司，优点时技术处理起来难度较小，缺点是如果网络不好或者服务器卡的话，效果不理想，会反应迟钝

2、一次性将城市数据和分支公司数据查询出来，各城市对应的分支公司作为一个集合处理成对应城市的一个属性，然后在前端把数据缓存起来，每次城市下拉框发生改变时，去你存储的数据中获取对应的分支公司数据并写入页面分支公司下拉框，优点是效率快，效果会好一些，缺点是技术难度稍高，而且后台分支公司数据如果发生变化，页面又没有刷新，便会不能及时获取最新数据。


小猪仔
3楼 · 2020-12-10 09:58

function getPositionGrade(){

$("#flag").nextAll().remove();//如果二级有列表，清除下

//下拉列表二级联动内容

var positionGrades = [

          ['一线1级','一线2级','一线3级','一线4级','一线5级','二线1级','二线2级','二线3级','二线4级','二线5级'],

          ['一线1级','一线2级','一线3级','一线4级'],

          ['一线1级','一线2级','一线3级','一线4级','一线5级','二线1级','二线2级','二线3级','二线4级','二线5级'],

          ['1级','2级','3级','4级','高级门店经理'],

          ['助理级','经理1级','经理2级','经理3级','高级门店副经理'],

          ['初级1级','初级2级','中级1级','中级2级','中级3级','高级专员'],

          ['初级','中级','高级']

         ];

var checkIndex = $("#positionLevel").get(0).selectedIndex;//获取一级列表选中的下标，

var positionGrade =positionGrades[checkIndex - 1];//关联二级列表数组

var opt="";//for循环组装下拉列表的内容

for(var i=0;i

opt += "";

}

$("#flag").after(opt);//追加到select中

}


@CcCc
4楼 · 2020-12-10 15:15

jQuery其实就是对js的封装，有两种办法解决你的问题：

1、给城市下拉框添加onchange事件，当城市下拉框发生改变，获取改变后的城市id，然后发送请求到后台去查询多对应的分支公司，并替换页面分支公司下拉框的数据，第一次加载页面时默认分支公司下拉框默认对应城市下拉框第一个城市下的分支公司，优点时技术处理起来难度较小，缺点是如果网络不好或者服务器卡的话，效果不理想，会反应迟钝

2、一次性将城市数据和分支公司数据查询出来，各城市对应的分支公司作为一个集合处理成对应城市的一个属性，然后在前端把数据缓存起来，每次城市下拉框发生改变时，去你存储的数据中获取对应的分支公司数据并写入页面分支公司下拉框，优点是效率快，效果会好一些，缺点是技术难度稍高，而且后台分支公司数据如果发生变化，页面又没有刷新，便会不能及时获取最新数据。



石丰源 - Code the future
5楼 · 2020-12-10 20:20

省市下拉框二级联动

请选择省：

请选择市：


清屿
6楼 · 2020-12-11 12:19

都是 大佬

爱煲汤的小王
7楼 · 2020-12-12 11:31

jQuery其实就是对js的封装，有两种办法解决你的问题：

1、给城市下拉框添加onchange事件，当城市下拉框发生改变，获取改变后的城市id，然后发送请求到后台去查询多对应的分支公司，并替换页面分支公司下拉框的数据，第一次加载页面时默认分支公司下拉框默认对应城市下拉框第一个城市下的分支公司，优点时技术处理起来难度较小，缺点是如果网络不好或者服务器卡的话，效果不理想，会反应迟钝

2、一次性将城市数据和分支公司数据查询出来，各城市对应的分支公司作为一个集合处理成对应城市的一个属性，然后在前端把数据缓存起来，每次城市下拉框发生改变时，去你存储的数据中获取对应的分支公司数据并写入页面分支公司下拉框，优点是效率快，效果会好一些，缺点是技术难度稍高，而且后台分支公司数据如果发生变化，页面又没有刷新，便会不能及时获取最新数据。


小小收藏家
8楼 · 2020-12-16 14:05


  1. <div class="select_addApply">

  3. <select name="province" id="province" class="classify">

  4. <option value="选择一级分类">选择一级分类option>

  5. select>

  6. <div class="errorBox select01"><i class="icon icon_error">i><span>此项不能为空span>div><br />

  8. <select name="city" id="city" class="classify mt10">

  9. <option value="">选择二级分类option>

  10. select>

  11. <div class="errorBox select02"><i class="icon icon_error">i><span>此项不能为空span>div>

  12. div>


相关问题推荐

  • jQuery 是库（library）还是框架(frJQuery 2021-12-23 14:02
    回答 9

    jQuery是库，不是框架。库只管引进来使用，除了库接口，没有其他约束，随便怎么用，free style。而框架则有着各种各样的严格约束。

  • jQuery 怎么实现点击页面其他地方隐藏菜单？JQuery 2021-12-23 14:01
    回答 4

    *{undefinedmargin:0px;padding:0px;}.main{undefinedcursor:pointer;}.list{undefinedborder:1px solid black;display:none;}.list li{undefinedcursor:pointer;border:1px solid red;list-style:none;}#noPopEvent...

  • jQuery的css选择器哪几个用的比较多？JQuery 2021-12-21 09:56
    回答 6

    id、name、class这三种会了就行了，后面在实践中慢慢学习吧。。不过现在纯前端好像都不咋用jquery了

  • 前端工程师如何从jquery平滑到react?JQuery 2021-12-21 09:55
    回答 5

    文档过一遍，感觉理解了写一个todolist，然后把react-router文档过一遍，写一个todolist，最后把redux文档看一遍，写一个todolist。这样下来，react全家桶基本理解了

  • 前端技术的发展趋势如何，jquery会被逐渐淘汰吗JQuery 2021-12-20 14:34
    回答 6

    前端技术每年都会不断更新，一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，前端技术工程师缺口非常大。技术的发展规律其实，技术的发展趋势就是追求更高的复用性，更简便的业务代码写法，所以最终都会要求跨平台、都会彻底分离非业务逻辑。j...

  • 用 jQuery 调用外部 HTML 文件，对 SJQuery 2021-12-20 14:34
    回答 3

    有一定影响,而且不仅对蜘蛛,如果用户浏览器把js禁用的话也显示不了

  • 有什么大站用 jQuery 作为前端脚本开发的呢？JQuery 2021-12-17 10:42
    回答 5

    国外还有 Amazon, 全球最大的电子商务网站。还有微软，很多很多。

  • JavaScript 除了 jQuery 还有什么JQuery 2021-12-17 10:42
    回答 4

    前端框架的vue.js,angular.js,可视化工具d3.js,移动端：zepto等

  • 有哪些jQuery替代品可选?JQuery 2021-12-16 13:48
    回答 6

    最接近替代品的当然是Zepto。不过如果你没有legacy的代码要维护，又只需要支持green browsers，可以考虑完全用标准api。

  • 基于asp.net，jquery，bootstraJQuery 2021-12-16 13:47
    回答 1

    1

  • 学jquery还是bootstrap？JQuery 2021-12-15 16:59
    回答 5

    两个都不学写网站一点问题都没有。工具而已，写代码的时候突然需要了现学现用都行。jquery 是方便你不使用原生js的情况下直接调用一些控制element动态响应的抽象方法 的函数库而boostrap是一个前端框架，主要作用是内置了很多全局css样式，写前端的时候随便用...

  • 如何高效地阅读 jQuery 源码？JQuery 2021-12-15 16:59
    回答 2

    1. jQuery 里面有很多东西是出于兼容性，历史遗留。比如 .ready() 之类的函数，为什么会很scroll 有关，那是为了兼容某些ie。这种代码对于编程思想来说不仅没用，而且是杂音，你要筛选出来就得了解这段代码的变动，费心费力得不偿失。2. jQuery 里面的代码不...

  • jQuery UI 有哪些缺点？JQuery 2021-12-15 16:58
    回答 6

    一个很明显的缺点就是，太大。对于一些比较小的项目确实可以做到快速开发，但是现在的jQuery太臃肿了，有很多用不到的功能。所以现在有了很多精简jQuery的项目。另外就是全DOM操作，钩子往往会依赖标签，如果依赖jQuery来搭建页面的话（比如后台输出json，然...

  • AngularJS和jQuery能否结合使用？JQuery 2021-12-15 16:58
    回答 2

    angularjs这个类库本身就借助了jquery的一个弱化版本jqLite来操作html中的dom树，所以angularjs中使用jquery是完全没有问题的，相反的如果你使用angularjs做项目时间越长你会发现angularjs只有配合jquery才能更好的进行开发。尤其在directive中操作dom元素，...

  • jQuery 淡入淡出效果如何实现，有什么需要注意JQuery 2021-04-26 15:35
    回答 3

    jquery有关于淡入淡出效果的方法，一共四个，分别是：fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 用于淡入已隐藏的元素$(button).click(function(){   $(#div1).fadeIn();   $(#div2).fadeIn(slow);   $(#div3).fadeIn(3000); });jQuery .....

  • jq中，extend实现插件拓展的原理是什么？这个Web语言 JQuery 2021-01-29 16:38
    回答 4

    下面我们要在这个对象上挂载一个extend方法，用于让开发者为我这个对象添加功能和方法。12345var $ = {   extend:function(ob){      /**暂时不管里面写什么**/   }  }现在，我们就在$这个对象上添加了一个extend方法，外部可以通过$.extend(obj...

没有解决我的问题，去提问