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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery冲突问题解决方法
Jan 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
PHP邮件专题
2006/10/09 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python标准库os库的函数介绍
2020/02/12 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
医生自荐信
2013/10/11 职场文书
大气污染防治方案
2014/05/19 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
大学生见习报告总结
2014/11/04 职场文书
大学生毕业个人总结
2015/02/15 职场文书
Python访问Redis的详细操作
2021/06/26 Python
nginx七层负载均衡配置详解
2022/07/15 Servers