jQuery实现标签子元素的添加和赋值方法


Posted in jQuery onFebruary 24, 2018

一、在jsp页面中定义<select>标签,如下:

<div>
<span>科室:</span>
<select class="dept-name-show" style="width: 70%;">
</select>
</div>

二、编写js语句:

<script>
$(function () {
var dname = $(".dept-name-show").eq(0);//选定<select>标签
var url = "${pageContext.request.contextPath}/getDepts.do";//请求路径
$(".dept-name-show").click(function () {
$.get(
url,
function (res) {
var len = res.length;
var op = dname.children().length;
if (op < len) {
var pp = "<option></option>";
for (var i = 0; i < len; i++) {
dname.append(pp);
dname.children().eq(i).text(res[i].name);
}
}
}
)
})
})
</script>

三、编写对应的请求语句:

List<Dept> deptList=null;
@RequestMapping(value = "/getDepts",method = {RequestMethod.GET})
public void getDepts(HttpServletResponse response) throws IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
if (deptList == null){
deptList = deptService.findAllDepts();
}else {
String res=JSON.toJSONString(deptList);
response.getWriter().write(res);
}
}

四、实现效果如下:

jQuery实现标签子元素的添加和赋值方法

jQuery实现标签子元素的添加和赋值方法

以上这篇jQuery实现标签子元素的添加和赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
实现jquery放大镜的两种方法
Feb 22 #jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
You might like
我的论坛源代码(一)
2006/10/09 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的变量和作用域详解
2016/07/13 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Python中生成ndarray实例讲解
2021/02/22 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
高三上学期学习自我评价
2014/04/23 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
小学数学教学随笔
2015/08/14 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript
基于Redission的分布式锁实战
2022/08/14 Redis
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript