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中的deferred使用方法
Mar 27 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现tab栏切换效果
Dec 22 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
php5 and xml示例
2006/11/22 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python实现字典依据value排序
2016/02/24 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python将txt文件读取为字典的示例
2018/12/22 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
高级销售员求职信
2013/10/25 职场文书
村委会贫困证明
2014/01/14 职场文书
个人优缺点自我评价
2014/01/27 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL