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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现推拉门效果
Oct 19 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
DC动漫人物排行
2020/03/03 欧美动漫
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
jquery创建div 实现代码
2009/04/27 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
Seajs的学习笔记
2014/03/04 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
用原生js做单页应用
2017/01/17 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Django的信号机制详解
2017/05/05 Python
Flask框架信号用法实例分析
2018/07/24 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Django nginx配置实现过程详解
2020/09/10 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
教师暑期培训感言
2014/08/15 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
文体活动总结
2015/02/04 职场文书
导游词之镜泊湖
2019/12/09 职场文书