多级联动下拉菜单插件:jquery.cxselect.js

话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果。后来百度了下,在此做个总结吧。

下面是以一名php程序员的角度来分析的。。。可能和前端同学分析的角度不大一样,见谅。

一、jquery.cxselect.js

(1)定义:cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。

(2)我们这里主要用到data 参数

在父元素上的 data- 属性

data-url 列表数据文件路径(此处只能设置路径,自定义需要在参数中设置)

data-nodata 子集无数据时 select 的状态。

data-required 是否为必选。

data-first-title 所有下拉框的第一个项目的标题

data-first-value 所有下拉框的第一个项目的值

例如:

scss 复制代码
data-url="{{url('/goods/get_type')}}

二、使用方法:

1、引入jquery和jquery.cxselect.js文件,这个大家都懂

2、项目中的应用:

ini 复制代码
  <div class="control-group">
    <label class="control-label" for="focusedInput">绑定设备类</label>

<div class="controls">
     <fieldset id="goods_select">
         <select class="g_type" name="g_type" id="g_type" data-url="{{url('/goods/get_type')}}"></select>
          <select class="goods_info_id" name="goods_info_id" id="goods_info_id" data-url="{{url('/goods/get_id')}}" data-json-name="name" data-json-value="value"></select>
     </fieldset>
  </div>
 </div>

这个代码有点长。。

(1)这里用的是select选项框。

(2)name和id要保持一致,也是我们需要用到的参数。

(3)data-url:由于楼主用的是laravel,所有直接写的路由名称,相当于请求服务器,查询想要的结果,然后以Json的形式返回。这里也可以写成:data-url="cityData.min.js"格式的。

(4)data-json-name对应的是name和value,和下面的js代码对应。

3、在页面结尾要有调用一下该方法:

xml 复制代码
<script>
    $("#goods_select").cxSelect({
        selects : ["g_type", "goods_info_id"],
        jsonName: 'name',
        jsonValue: 'value'
    });
</script>
</body>
</html>

(1)利用id选择器,声明要请求服务器的id名称,进行ajax的请求时需要的参数

(2)json的格式规范

4、date-url对应的服务器端的代码

php 复制代码
 /*
     * 获取某一设备分类下的相关设备
     * @param  type
     * @param  goods_info_id
     * @param  title
     * */
    public function get_id(Request $request)
    {
        $g_type = $request->input('g_type');
        $goods = DB::table('goods_info')->where('type','=',$g_type)->get();
        foreach($goods as $v)
        {
            $ret[] = [
                "name" => $v->title,
                "value" => $v->id,
            ];
        }
return response(json_encode($ret, JSON_UNESCAPED_UNICODE));
    }

(1)获取传过来的关键参数

(2)进行数据库查询

(3)将查询结果进行json的格式化,返回回去

5、效果图

如图所示:这是还没选的时候

如图所示:这是选择之后的

总结:这款插件,我觉得很适合各位后端的朋友,有时候自己写联动挺麻烦的,这个插件简单方便,而且还灵活。你需要什么数据,自己请求获取就好,不会限于什么省,市,县等三级联动,那都是毛毛雨。咱们这个插件理论山是可以实现所有联动需求的。大赞。

PS:我截的图比较丑,还是可以很美观的,这个得需要填其他参数,在这儿就不列出了,匿了。

谢谢,end

相关推荐
GO兔11 小时前
开篇:GORM入门——Go语言的ORM王者
开发语言·后端·golang·go
Lemon程序馆11 小时前
速通 GO 垃圾回收机制
后端·go
DemonAvenger11 小时前
Go语言中的TCP编程:基础实现与最佳实践
网络协议·架构·go
岁忧11 小时前
(LeetCode 面试经典 150 题 ) 58. 最后一个单词的长度 (字符串)
java·c++·算法·leetcode·面试·go
DemonAvenger15 小时前
深入理解Go的网络I/O模型:优势、实践与踩坑经验
网络协议·架构·go
程序员爱钓鱼20 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
Code季风21 小时前
深入比较 Gin 与 Beego:Go Web 框架的两大选择
开发语言·golang·go·gin·beego
Code季风1 天前
Gin 中间件详解与实践
学习·中间件·golang·go·gin
风飘百里1 天前
Go CGo 权威指南:从『链接地狱』到『部署天堂』
go
nlog3n1 天前
基于 govaluate 的监控系统中,如何设计灵活可扩展的自定义表达式函数体系
算法·go