Giter VIP home page Giter VIP logo

city-select's Introduction

city-select **省、市、县、乡四级行政区级联下拉选取

@Version: 1.0
@Author: Wing Meng
@Update: 2017-12-20

示例 DEMO

描述

  citySelect 是一款**四级行政区级联下拉选取的jQuery插件。 插件中所用的地区 JSON 数据采集自民政部、国家统计局,采集程序使用 Administrative-divisions-of-China,在此对其作者表示感谢!:clap:

使用方法及API

  1. 根据实际需要编写好 HTML 结构,citySelect 插件根据下拉框控件的数量来生成对应的行政区列表;

  2. 初始化:$(Selector).citySelect(Options);

    其中 Selector 为包含所有 select 地址下拉框的父容器;Options 为设置参数,具体见后文。

  3. 参数(Options)

    参数 默认值 描述
    search null 按 search 指定的内容显示,可以是行政区划代码或地址字符串。示例如下:
    $(Selector).citySelect({search: 41900401})
    $(Selector).citySelect({search: '广东省,深圳市,福田区'})
    (注:地区字符串分割符为英文逗号)
    prompt - 请选择 - 下拉框缺省提示语。可以是字符串或数组,当为数组时,将按照“省、市、区、街道办”的顺序设置对应下拉框的缺省提示语。
    loading 加载中... 当插件加载json文件,暂时不可用时的提示语。
    dataUrl json/ json 数据文件的相对路径。
    onchange function(){} 每一次下拉选取变更后的回调函数,返回当前 change 后下拉框的地址名和行政代码。
  4. 取值

    $(Selector).citySelect(function(code, nameArr) {
        /**
         * @param {string} code    - 行政代码
         * @param {array}  nameArr - 地区名称数组
         */
    });
    
  5. 后端对接

    推荐: 将行政代码传给后台,保存到数据库即可,前端使用时,后台从数据取出该值,传给前端,前端直接使用该值初始化 citySelect 插件,效率简直不要太好 ⚡。
    还可以将地区名称传给后台,保存到数据库,使用时和上一种方法类似,但效率要低一些。

city-select's People

Contributors

wingmeng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.