bootstrap-selectN联动

该插件，是来源于layui的一个插件，这里根据需求我自己的模板做了些修改，原作者：tomato。

![](/uploads/images/20220105/5bbaf0cec5bcfb6ecc39d4ef9d0d59c2.gif)

假设json数据为：
```javascript
var catData = [{"id":1,"name":"周边旅游","children":[{"id":24,"name":"广东","status":0,"children":[{"id":7,"name":"广州"},{"id":23,"name":"潮州"}]}]},{"id":5,"name":"国内旅游","children":[{"id":8,"name":"华北地区","children":[{"id":9,"name":"北京"}]}]},{"id":6,"name":"出境旅游","children":[{"id":10,"name":"东南亚","children":[{"id":11,"name":"马来西亚","children":[{"id":20,"name":"沙巴","children":[{"id":21,"name":"美人鱼岛","children":[{"id":22,"name":"潜水"}]}]}]}]}]}];
```

#### 简单使用
```html
<div class="form-group">
  <div id="example-1"></div>
</div>
```
```javascript
var catIns1 = $('#example-1').bootstrapSelectN({
    data: catData,
});
```
#### 设置空值项提示
```html
<div class="form-group">
  <div id="example-2"></div>
</div>
```
```javascript
var catIns2 = $('#example-2').bootstrapSelectN({
    data: catData,
    placeholder: ['设置一', '设置二', '设置三'],
});
```
#### 设置宽度

可单个使用，也可使用数组形式。`['120px', '190px', '200px']`
```html
<div class="form-group">
  <div id="example-3"></div>
</div>
```
```javascript
var catIns3 = $('#example-3').bootstrapSelectN({
    data: catData,
    width: '190px', // 设置实际长度或者百分比长度，当form表单的class="form-horizontal"时可以使用col-*
});
```
#### 表单中使用
```html
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-md-12" for="title">标题</label>
    <div class="col-sm-12">
      <input type="email" class="form-control" id="title" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-12">分类</label>
    <div id="example-4"></div>
  </div>
</form>
```
```javascript
var catIns4 = $('#example-4').bootstrapSelectN({
    data: catData,
    width: 'col-md-3',
});
```
#### url地址获取json数据
```html
<div class="form-group">
  <div id="example-5"></div>
</div>
```
```javascript
var catIns5 = $('#example-5').bootstrapSelectN({
    data: 'data_selectN_json.php',
    placeholder: ['请选择省', '请选择市', '请选择县/区'],
});
```
#### 指定已选中值
```html
<div class="form-group">
  <div id="example-6"></div>
</div>
```
```javascript
var catIns6 = $('#example-6').bootstrapSelectN({
    data: catData,
    selected: [6,10,11,20,21,22]
});
```

使用中增加以下的css。
```css
@media (min-width: 768px) {
    .form-inline .d-inline-block select.form-control {
        width: 100%;
    }
}
```

插件项目中页面名字：`test_bootstrap_selectN.html` `test_bootstrap_selectN_v4.html` `test_validate.html` `test_validate_v4.html` `data_selectN_json.php` (返回json演示用)

[点击查看 联动插件 在线演示](http://example.itshubao.com/example/136.html "点击查看 联动插件 在线演示")

[点击查看 联动插件在验证中的使用  在线演示](http://example.itshubao.com/example/138.html "点击查看 联动插件在验证中的使用  在线演示")

涉及的文件：
- `js/bootstrap-selectN.min.js`