# multistageTandem

**Repository Path**: void_rangers/multistageTandem

## Basic Information

- **Project Name**: multistageTandem
- **Description**: 一个依赖于select组件的多级联动
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-31
- **Last Updated**: 2022-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 插件

## README

# multistageTandem

#### 介绍
一个依赖于jQuery和select组件的多级联动插件


#### 使用说明


```
<script scr="xxxx/js/multistageTandem.min.js"></script>
<script scr="xxxx/js/weui_city.js"></script>
<script>
    //此插件仅用于多级联动的选择，最终值的获取还需val()方法得到
    $('xxx').linkage({
        doms: ['.p', '.c', '.d'],    //显示多级联动的class类名组
        list: weui_city              //多级联动数据
    });
</script>
```


#### 插件API

| Param | Type | Description |
| --- | --- | --- |
| doms | <code>array</code> | 显示多级联动信息的class类名组 |
| list | <code>array</code> | 多级联动的数据，下一级数据键名为children |
| labelKey | <code>string</code> | option内容的键名 |
| valueKey | <code>string</code> | select值的键名 |
| childrenKey | <code>string</code> | children子类的键名 |
| defaultValue | <code>array</code> | 默认值 |
| html | <code>object</code> | 添加的dom元素(jQuery对象) |
| noneMore | <code>Boolean|function</code> | 缺少子类时的操作，Boolean值时是默认操作，可传入自定义函数替代 |
| beforeCreate | <code>function</code> | 选择后，下一级列表挂载前 |
| updateBefore | <code>function</code> | 已选择，但未更新联动数据时的回调 |
| updateAfter | <code>function</code> | 已选择，并已更新联动数据时的回调 |

**Example**

```html
<div id="citySelect">
    <select name="data[province]" id="province">
        <option value="0">请选择</option>
    </select>
    <select name="data[province]" id="city">
        <option value="0">请选择</option>
    </select>
    <select name="data[province]" id="district">
        <option value="0">请选择</option>
    </select>
</div>
```

```js
$('#citySelect').linkage({
    doms: ['#province', '#city', '#district'],
    list: weui_city,
    defaultValue: ['湖南省', '长沙市', '岳麓区'],
});
```