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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现动态向上滚动
Dec 21 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
跟我学Laravel之安装Laravel
2014/10/15 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
javascript实现微信分享
2014/12/23 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
Python中的类学习笔记
2014/09/23 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
C++的几个面试题附答案
2016/08/03 面试题
班级聚会策划书
2014/01/16 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
搬迁通知
2015/04/20 职场文书
战友聚会致辞
2015/07/28 职场文书
爱国教育主题班会
2015/08/14 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Mysql排序的特性详情
2021/11/01 MySQL
mysql查看表结构的三种方法总结
2022/07/07 MySQL