省市区三级联动插件使用

Distpicker插件下载地址
它的文档中有丰富的示例，这里以 Yii 高级版框架为背景，介绍插件简单使用。

1. 下载插件

下载插件，把 distpicker.data.js，distpicker.js，main.js 三个文件放入 web/js 目录下。

2. 添加 addScript方法

因为插件是依赖 jQuery 的，所以要保证在 jQuery 加载完成后，再加载 Distpicker。
在 backend\assets\AppAsset 中添加 addScript() 方法

    /**
     * 定义按需加载 JS 方法，注意加载顺序在最后
     * @param \yii\web\View $view
     * @param $jsfile
     */
    public static function addScript($view, $jsfile)
    {
        $view->registerJsFile($jsfile,['depends' => 'backend\assets\AppAsset']);
    }

3. 引入 Distpicker

在页面中引入插件，注意文件路径。

<?php
AppAsset::register($this);
AppAsset::addScript($this,'@web/js/dist/distpicker.data.js');
AppAsset::addScript($this,'@web/js/dist/distpicker.js');
AppAsset::addScript($this,'@web/js/dist/main.js');
?>

4. 使用插件

在页面中加入，即可看出效果。

<div data-toggle="distpicker">
        <select data-province="浙江省"></select>
        <select data-city="杭州市"></select>
        <select data-district="西湖区"></select>
</div>

我们可以通过设置 data-province 等属性来设置控件的初始值，在数据反显时用得到。

默认样式不好看，我这里引入 bootstrap.css

<div class="form-group">
    <div class="form-inline">
        <label class="control-label" for="employee-born">出生地</label>
        <div id="distpicker4">
            <div class="form-group">
                <label class="sr-only" for="province4">Province</label>
                <select class="form-control" name="Employee[province]" id="province4"></select>
            </div>
            <div class="form-group">
                <label class="sr-only" for="city4">City</label>
                <select class="form-control" name="Employee[city]" id="city4"></select>
            </div>
            <div class="form-group">
                <label class="sr-only" for="district4">District</label>
                <select class="form-control" name="Employee[district]" id="district4"></select>
            </div>
        </div>
    </div>
</div>

我这里设置 select 的 name 属性是为了用模型的块赋值。

这个插件有个问题，比如香港特别行政区，data-district 不存在。台湾地区没有市和区。有需要的朋友需要注意了。