多级联动下拉菜单插件: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

相关推荐
煎鱼eddycjy1 天前
新提案:由迭代器启发的 Go 错误函数处理
go
煎鱼eddycjy1 天前
Go 语言十五周年!权力交接、回顾与展望
go
不爱说话郭德纲2 天前
聚焦 Go 语言框架,探索创新实践过程
go·编程语言
0x派大星3 天前
【Golang】——Gin 框架中的 API 请求处理与 JSON 数据绑定
开发语言·后端·golang·go·json·gin
IT书架3 天前
golang高频面试真题
面试·go
郝同学的测开笔记3 天前
云原生探索系列(十四):Go 语言panic、defer以及recover函数
后端·云原生·go
秋落风声4 天前
【滑动窗口入门篇】
java·算法·leetcode·go·哈希表
0x派大星5 天前
【Golang】——Gin 框架中的模板渲染详解
开发语言·后端·golang·go·gin
0x派大星6 天前
【Golang】——Gin 框架中的表单处理与数据绑定
开发语言·后端·golang·go·gin
三里清风_7 天前
如何使用Casbin设计后台权限管理系统
golang·go·casbin