jQuery cxSelect 联动下拉菜单

http://code.ciaoca.com/jquery/cxSelect/demo/oneself




调用 cxSelect 时,将使用 get 请求方法,通过data-url属性设定的接口地址,获取省份数据

// _test/province.php
[{"value":1,"name":"北京市"},{"value":2,"name":"上海市"},{"value":3,"name":"浙江省"},...]
当选择省份为“浙江省”时,对应的value为3,会在获取城市数据接口中添加对应参数,获取城市数据

默认取上一个select的name属性值作为参数名,也可以通过data-query-name来设置参数名

由于城市接口返回的数据是一个 JSON,但是城市数据放在 data 属性中,所以需要通过data-json-space="data"设置命名空间

// _test/city.php?province=3
{"state":"success","data":[{"value":301,"name":"杭州市"},{"value":302,"name":"宁波市"},...]}
当选择城市为“杭州市”时,也会传递对应参数,获取市区数据

而市区接口返回的数据层级更深,依然可以通过data-json-space="data.list"设置命名空间,以此类推

// _test/area.php?city=301
{"state":"success","data":{"list":[{"value":3101,"name":"上城区"},{"value":3102,"name":"下城区"},...]}}
第一个选框可不使用接口
当第一个选框在页面加载时已有选项时,可以不设置第一个选框的接口,减少连接数

省份

城市

地区

使用纯数组作为数据
如果返回数据或自定义数据为纯数组时,请将jsonName和jsonValue设置空字符串,也可以在
// 或调用时,通过参数设置
$('#array_data').cxSelect({
selects: ['first', 'second', 'third'],
jsonName: '',
jsonValue: ''
});

posted @ 2020-05-02 16:07  变形金刚之猩猩将军  阅读(412)  评论(0编辑  收藏  举报