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弹幕效果
May 06 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现上传图片功能
Jun 29 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学习的路线图
2013/07/10 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
判断ie的两种简单方法
2013/08/12 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python取余运算符知识点详解
2019/06/27 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
合作协议书模板2014
2014/09/26 职场文书
三严三实学习心得体会
2014/10/13 职场文书
红歌会主持词
2015/07/02 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python