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 Form轻松实现文件上传
May 24 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery实现下载图片功能
Jul 18 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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
php计算当前程序执行时间示例
2014/04/24 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
详细解读Python中解析XML数据的方法
2015/10/15 Python
如何利用python查找电脑文件
2018/04/27 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python 文件数据读写的具体实现
2020/01/24 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
.NET方向面试题
2014/11/20 面试题
管理工程专业求职信
2014/08/10 职场文书
统计工作个人总结
2015/03/03 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书