小可ThinkPHP学堂

?找回密码
?立即注册
搜索
热搜: 活动 交友 discuz
查看: 185|回复: 0
打印 上一主题 下一主题

[前端] cxSelect下拉列表bck怎么登录不了了使用方法

[复制链接]

41

主题

41

帖子

192

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
192
跳转到指定楼层
楼主
发表于 2019-9-26 16:12:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

cxSelectbck怎么登录不了了作为一个非常经典的多级联动下拉列表jQuerybck怎么登录不了了,使用起来还是比较方便的,今天小可老师就结合项目中的应用,讲解一下这个bck怎么登录不了了的使用方法。

这个bck怎么登录不了了附带了一个省市县的json数据,这个数据虽然有些过时了,结构比较简单,但作者给出的demo是以这个数据为例的,我们先把作者的demo研究明白吧。前往GitHub查看

一、demo的使用

首先是加载js文件,需要用到jQuery1.7以上的版本(我用的1.9.1),注意jQuery要在上面。


复制代码

然后是DOM结构:



  1. ??
  2. ??
  3. ??
复制代码

如果不考虑默认值(不是下拉列表第一个值)的情况,DOM结构就完成了。


demo的数据结构是这样子的(部分截取-北京、天津、河北)。

  1. [
  2. ??{
  3. ? ? "n":"北京市",
  4. ? ? "s":[{"n":"东城区"},{"n":"西城区"},{"n":"朝阳区"},{"n":"丰台区"},{"n":"石景山区"},{"n":"海淀区"},{"n":"门头沟区"},{"n":"房山区"},{"n":"通州区"},{"n":"顺义区"},{"n":"昌平区"},{"n":"大兴区"},{"n":"怀柔区"},{"n":"平谷区"},{"n":"密云县"},{"n":"延庆县"}]
  5. ??},
  6. ??{
  7. ? ? "n":"天津市",
  8. ? ? "s":[{"n":"和平区"},{"n":"河东区"},{"n":"河西区"},{"n":"南开区"},{"n":"河北区"},{"n":"红桥区"},{"n":"东丽区"},{"n":"西青区"},{"n":"津南区"},{"n":"北辰区"},{"n":"武清区"},{"n":"宝坻区"},{"n":"滨海新区"},{"n":"宁河县"},{"n":"静海县"},{"n":"蓟县"}]
  9. ??},
  10. ??{
  11. ? ? "n":"河北省",
  12. ? ? "s":[
  13. ? ?? ?{
  14. ? ?? ???"n":"石家庄市",
  15. ? ?? ???"s":[{"n":"长安区"},{"n":"桥东区"},{"n":"桥西区"},{"n":"新华区"},{"n":"井陉矿区"},{"n":"裕华区"},{"n":"井陉县"},{"n":"正定县"},{"n":"栾城县"},{"n":"行唐县"},{"n":"灵寿县"},{"n":"高邑县"},{"n":"深泽县"},{"n":"赞皇县"},{"n":"无极县"},{"n":"平山县"},{"n":"元氏县"},{"n":"赵县"},{"n":"辛集市"},{"n":"藁城市"},{"n":"晋州市"},{"n":"新乐市"},{"n":"鹿泉市"}]
  16. ? ?? ?},
  17. ? ?? ?{
  18. ? ?? ???"n":"唐山市",
  19. ? ?? ???"s":[{"n":"路南区"},{"n":"路北区"},{"n":"古冶区"},{"n":"开平区"},{"n":"丰南区"},{"n":"丰润区"},{"n":"曹妃甸区"},{"n":"滦县"},{"n":"滦南县"},{"n":"乐亭县"},{"n":"迁西县"},{"n":"玉田县"},{"n":"遵化市"},{"n":"迁安市"}]
  20. ? ?? ?},
  21. ? ?? ?{
  22. ? ?? ???"n":"秦皇岛市",
  23. ? ?? ???"s":[{"n":"海港区"},{"n":"山海关区"},{"n":"北戴河区"},{"n":"青龙满族自治县"},{"n":"昌黎县"},{"n":"抚宁县"},{"n":"卢龙县"}]
  24. ? ?? ?},
  25. ? ?? ?{
  26. ? ?? ???"n":"邯郸市",
  27. ? ?? ???"s":[{"n":"邯山区"},{"n":"丛台区"},{"n":"复兴区"},{"n":"峰峰矿区"},{"n":"邯郸县"},{"n":"临漳县"},{"n":"成安县"},{"n":"大名县"},{"n":"涉县"},{"n":"磁县"},{"n":"肥乡县"},{"n":"永年县"},{"n":"邱县"},{"n":"鸡泽县"},{"n":"广平县"},{"n":"馆陶县"},{"n":"魏县"},{"n":"曲周县"},{"n":"武安市"}]
  28. ? ?? ?},
  29. ? ?? ?{
  30. ? ?? ???"n":"邢台市",
  31. ? ?? ???"s":[{"n":"桥东区"},{"n":"桥西区"},{"n":"邢台县"},{"n":"临城县"},{"n":"内丘县"},{"n":"柏乡县"},{"n":"隆尧县"},{"n":"任县"},{"n":"南和县"},{"n":"宁晋县"},{"n":"巨鹿县"},{"n":"新河县"},{"n":"广宗县"},{"n":"平乡县"},{"n":"威县"},{"n":"清河县"},{"n":"临西县"},{"n":"南宫市"},{"n":"沙河市"}]
  32. ? ?? ?},
  33. ? ?? ?{
  34. ? ?? ???"n":"保定市",
  35. ? ?? ???"s":[{"n":"新市区"},{"n":"北市区"},{"n":"南市区"},{"n":"满城县"},{"n":"清苑县"},{"n":"涞水县"},{"n":"阜平县"},{"n":"徐水县"},{"n":"定兴县"},{"n":"唐县"},{"n":"高阳县"},{"n":"容城县"},{"n":"涞源县"},{"n":"望都县"},{"n":"安新县"},{"n":"易县"},{"n":"曲阳县"},{"n":"蠡县"},{"n":"顺平县"},{"n":"博野县"},{"n":"雄县"},{"n":"涿州市"},{"n":"定州市"},{"n":"安国市"},{"n":"高碑店市"}]
  36. ? ?? ?},
  37. ? ?? ?{
  38. ? ?? ???"n":"张家口市",
  39. ? ?? ???"s":[{"n":"桥东区"},{"n":"桥西区"},{"n":"宣化区"},{"n":"下花园区"},{"n":"宣化县"},{"n":"张北县"},{"n":"康保县"},{"n":"沽源县"},{"n":"尚义县"},{"n":"蔚县"},{"n":"阳原县"},{"n":"怀安县"},{"n":"万全县"},{"n":"怀来县"},{"n":"涿鹿县"},{"n":"赤城县"},{"n":"崇礼县"}]
  40. ? ?? ?},
  41. ? ?? ?{
  42. ? ?? ???"n":"承德市",
  43. ? ?? ???"s":[{"n":"双桥区"},{"n":"双滦区"},{"n":"鹰手营子矿区"},{"n":"承德县"},{"n":"兴隆县"},{"n":"平泉县"},{"n":"滦平县"},{"n":"隆化县"},{"n":"丰宁满族自治县"},{"n":"宽城满族自治县"},{"n":"围场满族蒙古族自治县"}]
  44. ? ?? ?},
  45. ? ?? ?{
  46. ? ?? ???"n":"沧州市",
  47. ? ?? ???"s":[{"n":"新华区"},{"n":"运河区"},{"n":"沧县"},{"n":"青县"},{"n":"东光县"},{"n":"海兴县"},{"n":"盐山县"},{"n":"肃宁县"},{"n":"南皮县"},{"n":"吴桥县"},{"n":"献县"},{"n":"孟村回族自治县"},{"n":"泊头市"},{"n":"任丘市"},{"n":"黄骅市"},{"n":"河间市"}]
  48. ? ?? ?},
  49. ? ?? ?{
  50. ? ?? ???"n":"廊坊市",
  51. ? ?? ???"s":[{"n":"安次区"},{"n":"广阳区"},{"n":"固安县"},{"n":"永清县"},{"n":"香河县"},{"n":"大城县"},{"n":"文安县"},{"n":"大厂回族自治县"},{"n":"霸州市"},{"n":"三河市"}]
  52. ? ?? ?},
  53. ? ?? ?{
  54. ? ?? ???"n":"衡水市",
  55. ? ?? ???"s":[{"n":"桃城区"},{"n":"枣强县"},{"n":"武邑县"},{"n":"武强县"},{"n":"饶阳县"},{"n":"安平县"},{"n":"故城县"},{"n":"景县"},{"n":"阜城县"},{"n":"冀州市"},{"n":"深州市"}]
  56. ? ?? ?}
  57. ? ? ]
  58. ??},
复制代码

在不指定默认值的情况下,默认值的内容为"请选择",默认值的value为""。

如果想指定默认值,作者给出了两种方式,

先说一下作者提出的两种方法:





复制代码

使用方法一的时候,默认值会变成浙江省,注意!注意!注意!这个地方有个坑,就是你给定的默认值的value和名称必须在下拉列表中存在,且两个值都对应上,这个demo里面的value和名称都是浙江省,都没问题,在后面的例子中,会出现value和名称不一样的情况,那个例子里面的浙江省对应的value是330000,那你就得设置成:

复制代码

这两个值有一个不对就会出现Bug(刷新列表默认值为浙江省,立马又变成了请选择)。

再说方法二,这里面其实也和上面一样的坑,就是这个data-value实际对应的是value值,demo里的名称和value都一样,没有问题,但如果demo的value值和名称不一致时,要写value值,不然也会出现上述Bug。

方法二的优先级要高于方法一的(前提是都设置对),并且这里面有个好玩的Bug,假如方法一设置的没问题,方法二有问题,那么会显示一下方法一的值,然后变成"请选择"。如果方法一设置的有问题,方法二没问题,那么会显示一下方法一的值,然后变成方法二的值。都设置有问题的情况下会显示一下方法一的值,然后变成"请选择"。说这么多,咱们都设置对就行了。

然后调用cxSelect就行了:

  1. $('#element_id').cxSelect({
  2. ??url: 'cityData.min.json',? ?? ?? ?? ?? ?// 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件
  3. ??selects: ['province', 'city', 'area'],??// selects 为数组形式,请注意顺序
  4. ??emptyStyle: 'none'
  5. });
复制代码

在调用cxSelect方法的时候有多个参数,下面把这些参数列举出来

名称
默认值
说明
selects [] 下拉选框组。输入 select 的 className
url null 整合列表数据接口地址(URL)
每个选框的内容使用各自的接口地址,详见 [DEMO]
data null 自定义数据,类型为数组,数据使用 JSON 格式。[DEMO]
emptyStyle null 子集无数据时 select 的状态。可设置为:"none"(display:none), "hidden"(visibility:hidden)
required false 是否为必选。设为 false 时,会在列表头部添加 选项。
firstTitle '请选择' 选框第一个项目的标题(仅在 required 为 false 时有效)
firstValue '' 选框第一个项目的值(仅在 required 为 false 时有效)
jsonSpace '' 数据命名空间
jsonName'n' 数据标题字段名称(用于 option 的标题)
jsonValue '' 数据值字段名称(用于 option 的 value,没有值字段时使用标题作为 value)
jsonSub 's' 子集数据字段名称

说明当中对这些参数已经进行了详细的描述,这里先把和demo有关的几个参数进行说明。

seletcts:这个要注意顺序。

data:这个其实就是把数据直接写进代码当中了,例如:

  1. data: [
  2. ? ? {name:'A', value: '1', sub: [
  3. ? ?? ?{name: 'A-1', value: '2', sub: [
  4. ? ?? ???{name: 'A-1-1', value: '11'}
  5. ? ?? ???// more..
  6. ? ?? ?]}
  7. ? ?? ?{name: 'A-2', value: '3', sub: [
  8. ? ?? ???{name: 'A-2-1', value: '34'}
  9. ? ?? ?]}
  10. ? ?? ?// more..
  11. ? ? ]},
  12. ? ? {name:'B', value: '5', sub: [
  13. ? ?? ?{name: 'B-1', value: '8', sub: [
  14. ? ?? ???{name: 'B-1-1', value: '16'}
  15. ? ?? ?]}
  16. ? ? ]}
  17. ? ? // more..
  18. ??]
复制代码

url:调用的数据的地址,如果是在TP5的模板上使用的话是可以使用url助手函数和__ADMIN__这种输出替换的。

emptyStyle:这个就是一个样式的设定,具体设置成none还是hidden根据项目实际选择即可。

required:这个参数默认为false,也就是下拉列表第一个值是"请选择"(这个"请选择"可以在后面更改,这个值是不在数据中的),如果设置为true,则没有"请选择"这类的选项,下拉列表中的所有的值都是数据中的。

firstTitle:就是下拉列表中的第一个值的名称,需要结合required为false使用,注意这块是一个整体的设置,假如我把firstTitle设置为"请选择省份",那么在你选择完省份以后,第二个下拉列表的第一个值也是"请选择省份",所以这块如果所有下拉列表的第一个值相同的时候,可以这么设置,如果不同建议分开设置(后面有设置方法)。

firstValue:和上面的firstTitle使用方法相同,一个是名称,另一个是value。

jsonSpace:这个小可老师也不是很懂,有对这块有所了解的可以在群里探讨研究。

剩下三个参数在demo中暂时用不到,在后面的例子中会进行讲解。


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表