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

最新推荐文章于 2023-09-26 17:26:02 发布

FlowZh

最新推荐文章于 2023-09-26 17:26:02 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

分类专栏： # 前端文章标签： EasyUI动态生成下拉列表 EasyUI下拉列表获取值刷新后下拉列表变回默认值

本文链接：https://blog.youkuaiyun.com/Alone_in_/article/details/97135203

前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用jQuery动态填充HTML中的Select标签和EasyUI的Combobox组件，并提供了获取值及刷新后回到默认值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、原生的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 要看实际情况变化哦！