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 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
小程序实现录音功能
2020/09/22 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python删除不需要的python文件方法
2018/04/24 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python内存映射文件读写方式
2020/04/24 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
公司户外活动总结
2014/07/04 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
2014年手术室工作总结
2014/11/26 职场文书
财政局长个人总结
2015/03/04 职场文书
请客吃饭开场白
2015/06/01 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
九年级化学教学反思
2016/02/22 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫