Layui带搜索的下拉框的使用以及动态数据绑定

说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。

    用任何插件都需要引用相应的css文件和js文件，在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块，少了这两步操作，select、checkbox、radio等将无法显示，并且无法使用form相关功能，下面就是加载的方法:

       另外，还要在一个容器中设定 class="layui-form" 来标识一个表单元素块，如要使用带搜索的下拉框只需在select标签添加一个”lay-search”属性就可以了。

       这就是绑定到了。

   下拉框的数据一般是动态的，数据大多是从数据库中查询出来再绑定到下拉框的。为了方便，绑定数据的方法一般写在一个方法里方便使用。

    方法的参数一般有三个，一个是select标签的id，一个是查询数据的路径，还有一个是可有可无的选中值。其实方法里面就是由一个post请求构成的，构建一个动态下拉框大致分为两步，第一步请求数据，第二步把查询到的数据拼接到下拉框里。

    请求数据就是直接一个post请求，把传进来的路径拼接到post请求的路径中就可以了。

    拼接select内容这一步就是在post请求的回调函数里进行的，遍历查询到的数据用方法append()一个个的拼接到select里面，在拼接之前要先拼接一个value值为空的选项，这个选项是给请选择预留的，否则一开始就会选中拼接的第一个数据，导致一些不需要选择的数据没办法取消选择。

    还有就是选中值，首先要判断传过来的选中值是否为空，不为空再设置select的val值。

如果要用layui的下拉框那就必须添加多一段代码，就是重载表单：form,render();。如果不加这一句代码的会导致下拉框的数据时有时无，绑定的数据漂浮不定，一会绑定成功一会绑定失败。