zoukankan      html  css  js  c++  java
  • 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: ''
    });

  • 相关阅读:
    Sublime Text 3 安装及常用插件配置
    利用事件对象实现线程同步
    基于UDP(面向无连接)的socket编程
    基于TCP(面向连接)的socket编程
    基于TCP(面向连接)的socket编程
    响应式布局之媒体查询 @media
    (function($){})(jQuery)---Javascript的神级特性:闭包
    noConflict()
    $.extend()与$.fn.extend()
    Web中的宽和高
  • 原文地址:https://www.cnblogs.com/cnwp007/p/12818440.html
Copyright © 2011-2022 走看看