下拉列表之前后端交互

本文介绍: 下拉列表之前后端交互下拉列表技术选择 layui element–uijQue ry 下拉列表技术选择最近做项目需要用到下拉列表的功能，且需要实现一个页面有两个下拉列表，互相独立，并不是多级联动的那种。在对下拉列表技术选择笔者找到了三种技术实现，分别是element–ui，layui，以及jQue ry。综合对比三种技术实现的下拉列表，layui 实现的下拉列表功能最为丰富，且界面最为美观，element–ui次之，jQue ry 最后。layui 这里我从wiki 文档拿出一个例子，并对代码和注释进行了一些删减和修

下拉列表之前后端交互

- 下拉列表技术选择

下拉列表 技术 选择

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

综合对比三种技术实现的下拉列表，layui 实现的下拉列表功能最为丰富，且界面最为美观，el em ent–ui次之，jQue ry 最后。

elem ent–ui

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

&lt;el-select v-model="value" placeholder="请选择"&gt;
    &lt;el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"&gt;
    </el-option&gt;
  </el-select&gt;

layui

这里我从wik i 文档中拿出一个例子，并对代码和注释进行了一些删减和修改，可以看到 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: [],                       
                        };