jQuery带搜索功能的下拉框，可以动态添加数据，实现级联效果

一图胜千言：

插件原地址：http://www.jq22.com/jquery-info7063（不建议浪费时间点进入看）

因为这个插件坑的很，没有点击选中事件，然后参考完美解决searchableselect不支持change事件的方法，实现了点击选中的功能。

但是要实现级联效果就不行了，经过一番研究找到了解决方案。

该插件的原理如下：

我们设置数据是设置给了h5原生的select控件，然后在插件的初始化中把原生select隐藏掉了，然后再在select后面添加了一些div，div中的数据是从select中获取到的，一番逻辑处理后就实现了下拉选择的效果。

但是存在二个问题：

1，没有点击选中事件，这个需要在js中添加selectItem方法。

2，插件初始化过一次后再动态去添加数据的话，第一次初始化生成的div没有清除掉，就会产生多个，下拉框的界面效果。这里需要每次添加数据时清除之前添加的div。

只要解决了这两个问题就可以实现级联效果(为所欲为)了。

具体用法如下：

1，添加h5代码

    <div style="display: inline-block">
        <select id="selector">
            <option value="-1">请选择</option>
        </select>
    </div>

    <div style="display: inline-block">
        <select id="selector2">
            <option value="-1">请选择</option>
        </select>
    </div>

2，初始化select，并给第一个添加数据

    $(function () {
        $('#selector').searchableSelect();
        $('#selector2').searchableSelect();
    });

    for (let i = 0; i < 20; i++) {
        $("#selector").append("<option value='" + i + "'>" + i + "</option>");
    }

3，分别添加点击事件

    $("#selector").change(function () {
        _id = $("#selector").val();
        console.log("第一个：" + _id);
        $("#selector2").empty();
        $("#selector2").append("<option value='-1'>请选择</option>");

        for (let i = 0; i < 10; i++) {
            $("#selector2").append("<option value='" + _id + i + "'>" + _id + i + "        </option>");
        }
        $('#selector2').searchableSelect();
    });

    $("#selector2").change(function () {
        _id = $("#selector2").val();
        if(_id!=-1){
            console.log("第二个：" + _id);
        }
    });

在第一个select的点击事件中把第二个select的数据清除掉，然后再根据第一个select的选中内容，给第一个select添加数据，然后需要对第二个select初始化一下。这就实现了级联效果。

代码地址：https://download.csdn.net/download/bigboysunshine/11004254