下拉列表之前后端交互

下拉列表技术选择element-uilayuijQuery下拉列表之前后端交互思路下拉列表赋值和回显实现

下拉列表技术选择

最近做项目需要用到下拉列表的功能，且需要实现一个页面有两个下拉列表，互相独立，并不是多级联动的那种。在对下拉列表技术选择笔者找到了三种技术实现，分别是element-ui，layui，以及jQuery。

综合对比三种技术实现的下拉列表，layui实现的下拉列表功能最为丰富，且界面最为美观，element-ui次之，jQuery最后。

element-ui

这里从element-ui官方中文文档拿了其中一个例子，element-ui也可以实现下拉列表的众多功能像上面的layui一样。不过element-ui通常和vue结合使用，且采用组件的形式，好用是非常好用，可惜笔者的项目并没有采用组件式开发。 为不让无用代码占用过多篇幅，这里挑选文档中实现下拉列表的关键代码。（下文同）

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value">

layui

这里我从wiki文档中拿出一个例子，并对代码和注释进行了一些删减和修改，可以看到layui实现的下拉列表具有多选，全选，清空，反选，自定义，以及进行模糊搜索自动查询功能，可以说是非常丰富了。

var options = {

el: '#demo1',

name: 'xmselectName',

layVerify: 'required',

filterable: true,

tips: '你喜欢什么水果呢?傻瓜教程',

toolbar: {

show: true,

list: [

'ALL',

'CLEAR',

'REVERSE',

{

name: '自定义',

icon: 'el-icon-star-off',

method(data){

alert('我是自定义的');

}

}

]

},

data: [],

};

jQuery

下拉列表之前后端交互思路

其实这里笔者采用的是layui结合jQuery方式实现的，在与后台交互方面采用了异步ajax交互，这刚好适合笔者项目，因此笔者对其进行了扩展和延申。在开发中，笔者了解到下拉列表的数据需要从后台数据库表获取，因为同一页面需要实现两个下拉列表，且互相独立，因此笔者在后端写了两个独立的接口，专门获取数据库中的某表数据，返回的都是一个集合。在前端方面笔者采用异步ajax，在回调函数中通过获取访问后台接口返回的对象中的单个属性值对前端输入进行字符串拼接，且采用了$.each()方法进行遍历。(后端接口几分钟就写完了，主要是前端样式及交互方面耗了笔者半天时间。。。无语这么简单还耗了这么长时间。。。)

下拉列表赋值和回显实现

代码实现链接

文章来源

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：