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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
基于jquery实现五星好评
Nov 18 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现滑动开关效果
Aug 02 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递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python 写的一个爬虫程序源码
2016/02/28 Python
python实现Floyd算法
2018/01/03 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
测试驱动开发的主要步骤是什么
2014/12/10 面试题
质检的岗位职责
2013/11/17 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
活动总结格式
2014/08/30 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
导游词之江南周庄
2019/12/06 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Python装饰器的练习题
2021/11/23 Python