生成下拉框的几种方法总结——数据来源：数据库

下拉框的内容可以来自数据库、枚举、自己在程序中的定义等，我们今天来介绍一下先介绍来自数据库的数据进行下拉列表的实现。

使用场景：客户下拉列表等

---

 

1、确保数据库中有相关客户信息数据。

2、获取数据格式(id，name)

<select id="getCusCustomerForSelect" resultType="java.util.Map">
        select id,Customer_Name as name from cus_customer
  </select>

3、返回数据类型List<Map<String,Object>>

List<Map<String,Object>> getCusCustomerForSelect();

4、在js中获取生成下拉框所需要的数据

/**
 * 获取客户下拉列表
 * @param selectId
 */
function getCusCustomerForSelect(selectId) {
  var $selectId = $("#" + selectId);
  var url = "commonCtrl/getCusCustomerForSelect";
  $.get(url, function (data) {
    var info = "<option value=''>请选择</option>";
    for (var i = 0; i < data.length; i++) {
      info += "<option value=" + data[i].id + ">" + data[i].name + "</option>";
    }
    $selectId.append(info);
    layui.use('form', function () {
      var form = layui.form;
      form.render('select');

    })
  })
}

5、页面上调用展示，本次使用的是layui

 <select type="text" id="customerId" name="customerId" lay-filter="customerId" lay-search
                            autocomplete="off"
                    ></select>

js中调用

<script>
    var $ = layui.jquery;
    $(function () {
        getCusCustomerForSelect("customerId");
    });
</script>