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

素颜马尾好姑娘i 2021-11-22 12:40 404阅读 0赞

# 一、原生的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);
            }
        }

最近遇到这个问题，顺便记录一下，需要注意的是，我代码中的 text 和 value 要看实际情况变化哦！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: /images/20211122/144210257ed64a019d8ceded3661206c.png