zoukankan      html  css  js  c++  java
  • 生成下拉框的几种方法总结——数据来源:数据库

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

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


    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>
  • 相关阅读:
    Codeforces467C George and Job
    Codeforces205E Little Elephant and Furik and RubikLittle Elephant and Furik and Rubik
    Codeforce205C Little Elephant and Interval
    51nod1829 函数
    51nod1574 排列转换
    nowcoder35B 小AA的数列
    Codeforce893E Counting Arrays
    gym101612 Consonant Fencity
    CodeForces559C Gerald and Giant Chess
    CodeForces456D A Lot of Games
  • 原文地址:https://www.cnblogs.com/yangyuke1994/p/9999245.html
Copyright © 2011-2022 走看看