如何用jstl的select标签做二级联动下拉列表框??
下拉列表框的多级联动早就会了。但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题。主要问题在用Ajax查询到的数据如何拼成下拉选项的时候。其实很简单,但我还是折腾了好久。所以这里做下笔记,以免哪天忘了。
注意:我的前缀:prefix="form"
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
----------------------------------------------------------------------------
遇到的问题一:当JQuery中出现“<form:option”这段字符串的时候就会出问题。
先上两张图,说明<form:option>标签是可以用作<form:select>的子标签的。

-----------------------------------------------------------------------------

以上两张图说明<form:option>标签是可以用作<form:select>的子标签的。
但是,当我在JQuery中拼接<form:option>标签的时候出现了错误。

var baseInfoId = list[i].id;
var baseInfoName = list[i].name; var $option = $("<form:option value='" + baseInfoId + "' >" + baseInfoName + "</form:option>"); $option.appendTo($attendance_emp);

运行出现的错误

-

意思是:option标签只能用在合理的select标签内。。。。这样理解对吗??反正我是这么理解的。。。。。
搞来搞去发现,,,在上面一开始的时候我就试过了<form:option>标签明明是可以用在<form:select>标签内的呀??为什么我在JQuery里面拼接用函数生成一个<form:option>选项的时候就错呢???鼓捣了半天。。。最后觉得应该是“<form:option”这个字符串在JQuery代码中导致出现的问题。。。。。然后就把这个字符串拆了。。。。如下:

var baseInfoId = list[i].id;
var baseInfoName = list[i].name; var $option = $("<form"+":" + "option value='" + baseInfoId + "' >" + baseInfoName + "</" + "form" + ":" + "option>"); $option.appendTo($attendance_emp);

这下终于不报错了。
但是,高兴的太早。。。。。
拼接的下拉选项呢??????????

这里我又折腾了好久,感觉明明自己是对的但却结果很让人失望。。。。。。把自己其他的地方的代码都怀疑了一遍。
最后确定了,问题就出在下面这行代码上。可是我创造出来的var $option明明是对的呀????为什么就不能appendTo 呢???
$option.appendTo($attendance_emp);
唉,最后还是没有解决这个问题。。。。。
问题总是要解决的。。没办法。<form:option>标签改成<option>标签。这下就可以添加了下面是正确的代码。。。。
var baseInfoId = list[i].id;
var baseInfoName = list[i].name; var $option = $("<option value='" + baseInfoId + "' >" + baseInfoName + "</option>");
$option.appendTo($attendance_emp);
其实,一开始就想把<form:option>标签改成<option>标签的,但是认为<form:select>标签下的<option>标签怎么能没有form前缀呢??。。然后就把想法搁置了。浪费了好多时间。
但是还是有收获的,过程中学会了好多JQuery函数。
如何用jstl的select标签做二级联动下拉列表框??的更多相关文章
- Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
- select标签实现二级联动
效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> ...
- JSTL和select标签的组合使用
1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...
- <select>简易的二级联动
1.首先是表单页面: <tr> <td align="right"> <label class="Validform_label" ...
- select菜单实现二级联动
<tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...
- select下拉二级联动
function opt(){ var id = $("#ids").val(); $.ajax({ type: "POST", url: "$ ...
- Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
- 03_MyBatis基本查询,mapper文件的定义,测试代码的编写,resultMap配置返回值,sql片段配置,select标签标签中的内容介绍,配置使用二级缓存,使用别名的数据类型,条件查询ma
1 PersonTestMapper.xml中的内容如下: <?xmlversion="1.0"encoding="UTF-8"?> < ...
- c# select标签绑定枚举,并以Description做Text显示
今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...
随机推荐
- Codeforces 936E. Iqea
Description 给出一张四连通网格图,其中有 \(n\) 个点是连通的,维护以下两种操作: 1.把某个点变黑 2.给出一个白点,查询离这个白点最近的黑点的距离 题面 Solution 我们把每 ...
- [转]Using $select, $expand, and $value in ASP.NET Web API 2 OData
本文转自:https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/using- ...
- [转载]ZendStudio格式化html错位问题修正
原文链接leeon.me ZendStudio提供的HTML编辑功能感觉很强大,有时候觉得比dw更加人性化,而且整合php在一个编辑器上编写前端会方便很多,以前每次通过zend格式化html代码都会奇 ...
- JavaScript中 运算符
运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值 根据所执行的运算,运算符可分为以下类别: (1) 算术运算符 (2) 比较运算符 运算符 说 明 示 例 == 等于. 如果两个操作数相 ...
- 2.VS2012为创建的类添加注释的模板
在项目中给类添加注释的优点: 1.方便查看这个类是为了那些功能 2.是成员小组中的谁负责编写的 根据自己的vs的安装路径找到类模板的位置:D:\Program Files (x86)\Microsof ...
- [Erlang]各种系统限制总结
Erlang本身对进程数,原子长度等没有限制,但为了提高性能和节省内存,总会在实际实现中和运行环境中作出一些限制. 1.进程数量 缺省情况下同时存在的最大Erlang进程数量不超过2^18=26214 ...
- bash的常用功能呢
一.tab键可以自动补齐命令 二.命令历史 1.history 查看之前敲过的所有命令 2.!历史命令编号 调用历史的某一个命令 三.命令别名 1.设置别名 alias 别名=‘命令’ 2.移除 ...
- aspose words做插入压缩后图片到Word文档中
最近用aspose words做导出Word的功能,发现图片的导出有点难受,一开始是这样写的 Document doc = new Document("D:\\Template.docx&q ...
- javaweb之请求的转发和重定向
1.什么是请求转发和请求重定向? 请求转发: xxServlet收到请求,然后直接转发给yyServlet,然后yyServlet返回给客户端.整个过程中,客户端发出一个请求,收到一个响应. 重定向: ...
- java设计模式之装饰者模式学习
装饰者模式 Decorator模式(别名Wrapper):动态将职责附加到对象上,若要扩展功能,装饰者提供了比继承更具弹性的代替方案. 装饰者与被装饰者拥有共同的超类,继承的目的是继承类型,而不是行为 ...