springboot项目里要用到下拉框动态更新的功能，这里记一下。子项的内容是从数据库中获取的字段。
 
一、最终效果
 
 
二、html
 
<div class="layui-input-inline">
   <select id="getGuid" name="Guid" lay-search style="width:190px;height:35px">
    <option value="">请选择</option>
   </select>
</div>
 
三、js部分
 
    function GuidInit() {
           $.ajax({
             type: 'POST',
             url: "log/getGuidList",
             success:  function (data) {
                  $("#getGuid").empty();
                  $('#getGuid').append(new Option("请选择Guid"));
                  // 解析list变成json
                  var jsonData = JSON.parse(data); //jsonData是该下路下的所有区间（json格式）
                  for (var i = 0; i < jsonData.length; i++) {
                        $('#getGuid').append(new Option(jsonData[i]));
                  }
              },
             error: function () {
                   alert("sorry");
              },
             dataType : 'text',
             contentType : 'application/json'
             });

    }
 
这里的getGuid是和select标签里的id对应
 
四、java代码
 
    @ResponseBody
    @RequestMapping(value = "/getGuidList")
    public List<String> getGuidList(HttpServletResponse response) {
        List<String> list = new ArrayList();
        // 添加数据，这里我是通过数据库获取的list
        list.addAll(logcatService.getGuidList());
        response.setStatus(200);
        for (String str : list) {
            System.out.println("+++++++++++++++++++++" + str);
        }
        return list;
    }
 
我这里返回的数据是List集合，当然返回json数据，直接返回字符串，后端拿到之后解析也可以。
 但是建议最好的处理方式是返回实体，数据存存取也是利用实体，这样处理起来就很方便专业。

layui.use(['form', 'upload'] , function () {
    var $ = layui.jquery
        , upload = layui.upload
        , form = layui.form;
            $.get(ctx + '/???/???', {}, function (data) {
                var $html = "";
                if(data.data != null){
                    $.each(data.data, function (index, item) {
                        if (item.proType){
                            $html += "<option class='generate' value='" + item.id + "'>" + item.proType + "</option>";
                        }else{
                            $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                        }
                    });
                 $("select[name='???']").append($html);
                 //反选
                 $("select[name='???']").val($("#???").val());
                 //append后必须从新渲染
                 form.render('select');
             }
        })
})

 
$(function(){
var grade=$("#grade");
grade.append("一年级"); //添加下拉列表
grade.append("二年级");
grade.append("三年级");
$("四年级").appendTo(grade); //添加下拉列表
$("").val("4").text("五年级").appendTo(grade); //添加下拉列表
$("").val("5").text("六年级").prependTo(grade); //追加下拉列表到开头
$("option[value='1']").remove(); //移除value值为1的下拉选项
grade.val("2"); //设置默认的选中状态
var maxGradeIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性
var gradeText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容
//grade.empty(); //清空下拉列表选项
grade.change(function(){
alert($(this).find("option[value='3']").text());
});
alert(gradeText);
});
 
转载于:https://www.cnblogs.com/qinweizhi/p/8319332.html

 
$(function(){
 
var grade=$("#grade");
 
grade.append("一年级"); //添加下拉列表
 
grade.append("二年级");
 
grade.append("三年级");
 
$("四年级").appendTo(grade); //添加下拉列表
 
$("").val("4").text("五年级").appendTo(grade); //添加下拉列表
 
$("").val("5").text("六年级").prependTo(grade); //追加下拉列表到开头
 
$("option[value='1']").remove(); //移除value值为1的下拉选项
 
grade.val("2"); //设置默认的选中状态
 
var maxGradeIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性
 
var gradeText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容
 
//grade.empty(); //清空下拉列表选项
 
grade.change(function(){
 
alert($(this).find("option[value='3']").text());
 
});
 
alert(gradeText);
 
});