动态生成下拉列表（JQuery、EasyUI）

一、原生的select标签：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
<script>
//动态添加下拉列表
$(document).ready(function() {
    //动态添加下拉列表
    $.ajax({
        type:"GET",
          url:""URL地址（后台）",
         success:function(data){
              // 情况一：返回的是字符串数组
           for(var i in data){             
                $("#name").append("<option value='"+data[i]+"'>"+data[i]+"</option>");
              }
              // 情况二：返回的是List集合
              // var infos = eval(data); // 转为json对象
              // for (var i = 0; i < infos.length; i++) {
              //     $("#name").append("<option value='"+infos[i].id+"'>" + infos[i].name + "</option>");
              // }
          }
      });
});
</script>
</head>
<body>
    <select id="name" name="name">
        <option value="null">全部</option>
    </select>
</body>
</html>

获取值的方式：

name: $("#name").val()

刷新后回到默认值：

var opt = $("#name").find("option:first").val();
$("#name").find("option[value="+opt+"]").attr("selected","true");

知识点：

当我想通过 $(“#progress”).find(“option[value=”+data.progress+”]“).attr(“selected”,”true”); 在 JS 上去设置下拉选中值的时候，来回切换几次后发现 selected 不起作用了，估计是浏览器的兼容问题，将写法作如下更改即可解决：

$("#progress option").removeAttr("selected"); // 去除原来的选项
$("#progress").find("option[value="+data.progress+"]").prop("selected","true");

二、EasyUI的下拉列表：

用 EasyUI 的下拉列表样式时，动态生成的方法，与原始的select标签不同哦！

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
<script>
//页面加载时加载
$(document).ready(function() {
    //动态添加下拉列表
    $.ajax({
        type:"GET",
        url:"URL地址（后台）",
        success:function(data){
            var options = [{text:"全部",value:"null"}]; 
            $.each(data,function(i,val){
                options.push({
                    text : val,
                    value : val
                });
            });
            //读取本地列表数据
            $("#name").combobox("loadData",options);
        }
    });
}); 
</script>
</head>
<body>
     <select id="name" name="name" class="easyui-combobox" data-options="width:200"> 
        <option value="null"></option>
     </select>
</body>
</html>

获取值的方式：

storageName : $('#name').combobox('getValue')

刷新后回到默认值：

$('#name').combobox('select','null'); 
// 'null'指的是要回到的option的value值

三、知识拓展

根据 text 去选中对应下拉列表选项。

情形一：原生的select标签

$("#name").find("option").each(function (data) {
    var $this = $(this);
    if($this.text() == text) {
        $this.attr("selected", true);
    }
});

情形二：EasyUI的combobox

$('#name').combobox('select','菜单项'); //菜单项可以text或者value

问题描述：在 text 和 value 不同的情况下，这个select方法，无论菜单项写成text还是value，页面都会显示text 。但是只有写成value，后边再使用getValue才会取到value，不然会取text值。

var data = $('#editProType').combobox('getData');
    for(var i=0 ;i<data.length;i++){
        if(row.productType==data[i].text){
            $("#editProType ").combobox('select',data[i].value);
        }
    }