bootstrap-selectN联动

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

假设json数据为：

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":"潜水"}]}]}]}]}]}];

简单使用

<div class="form-group">
  <div id="example-1"></div>
</div>

var catIns1 = $('#example-1').bootstrapSelectN({
    data: catData,
});

设置空值项提示

<div class="form-group">
  <div id="example-2"></div>
</div>

var catIns2 = $('#example-2').bootstrapSelectN({
    data: catData,
    placeholder: ['设置一', '设置二', '设置三'],
});

设置宽度

可单个使用，也可使用数组形式。['120px', '190px', '200px']

<div class="form-group">
  <div id="example-3"></div>
</div>

var catIns3 = $('#example-3').bootstrapSelectN({
    data: catData,
    width: '190px', // 设置实际长度或者百分比长度，当form表单的class="form-horizontal"时可以使用col-*
});

表单中使用

<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>

var catIns4 = $('#example-4').bootstrapSelectN({
    data: catData,
    width: 'col-md-3',
});

url地址获取json数据

<div class="form-group">
  <div id="example-5"></div>
</div>

var catIns5 = $('#example-5').bootstrapSelectN({
    data: 'data_selectN_json.php',
    placeholder: ['请选择省', '请选择市', '请选择县/区'],
});

指定已选中值

<div class="form-group">
  <div id="example-6"></div>
</div>

var catIns6 = $('#example-6').bootstrapSelectN({
    data: catData,
    selected: [6,10,11,20,21,22]
});

使用中增加以下的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演示用)

点击查看 联动插件 在线演示

点击查看 联动插件在验证中的使用 在线演示

涉及的文件：

• js/bootstrap-selectN.min.js