下拉列表框的多级联动早就会了。但是用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标签做二级联动下拉列表框??的更多相关文章

  1. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  2. select标签实现二级联动

    效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> ...

  3. JSTL和select标签的组合使用

    1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...

  4. <select>简易的二级联动

    1.首先是表单页面: <tr> <td align="right"> <label class="Validform_label" ...

  5. select菜单实现二级联动

    <tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...

  6. select下拉二级联动

    function opt(){ var id = $("#ids").val(); $.ajax({   type: "POST",  url: "$ ...

  7. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  8. 03_MyBatis基本查询,mapper文件的定义,测试代码的编写,resultMap配置返回值,sql片段配置,select标签标签中的内容介绍,配置使用二级缓存,使用别名的数据类型,条件查询ma

     1 PersonTestMapper.xml中的内容如下: <?xmlversion="1.0"encoding="UTF-8"?> < ...

  9. c# select标签绑定枚举,并以Description做Text显示

    今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...

随机推荐

  1. 入门系列之在Ubuntu上使用Netdata设置实时性能监控

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小翼 发表于云+社区专栏 介绍 Netdata通过可扩展的Web仪表板提供准确的性能监控,可以显示Linux系统上的流程和服务.它监控 ...

  2. Python基础(6) - 基本语句

    Python print(在Python 3.0中就变成了函数了) print语句是把对象用文本化的形式输出到标准的输出流上. Operation  Interpretation print spam ...

  3. 【c++】重载操作符

    目录 输入和输出操作符 算术操作符和关系操作符 下标操作符 自加.自减操作符 成员访问操作符 1  输入和输出操作符 1.1 输出操作符 1.1.1 示例 #include <iostream& ...

  4. Golang教程:goroutine信道

    在上一篇教程中,我们讨论了如何使用协程实现并发.在这篇教程中,我们将讨论信道以及如何使用信道实现协程间通信. 什么是信道 信道(Channel)可以被认为是协程之间通信的管道.与水流从管道的一端流向另 ...

  5. AtCoder Regular Contest 059 F Unhappy Hacking

    Description 题面 Solution 我们发现如果一个位置需要被退掉,那么是 \(0\) 或 \(1\) 都没有关系 于是我们想到把 \(0,1\) 归为一类 问题转化为每一次可以添加和删除 ...

  6. Js的小技巧

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  7. 超时重试(一)ajax

    我们使用jquery的ajax,超时重试可以采用两种方式,一种是配置ajax的timeout的参数,另一种就是以setTimeout定时器的方式实现: 1)timeout参数配置方式 var xhr ...

  8. lintcode 刷题记录··

    单例模式,用C#实现过单例模式,python区别就是类里边的静态方法写法不一样,python叫类方法,函数之前加@classmethod class Solution: # @return: The ...

  9. 第7章 征服CSS3选择器(下)

    :enabled选择器 在Web的表单中,有些表单元素有可用(":enabled")和不可用(":disabled")状态,比如输入框,密码框,复选框等.在默认 ...

  10. Navicat工具、pymysql模块

    一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具,我们使用Navicat工具,这个工具本质上就是一个socket客户端,可视化的连接m ...