动态生成下拉列表(JQuery、EasyUI)

it2022-05-08  8

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


最新回复(0)