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 实现表单验证功能
Jul 05 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery 动画与停止动画效果实例详解
May 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
JS中 用户登录系统的解决办法
2013/04/15 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python实现电脑自动关机
2018/06/20 Python
python中reader的next用法
2018/07/24 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python 去除字符串中指定字符串
2020/03/05 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
html粘性页脚的具体使用
2022/01/18 HTML / CSS
关于vue-router-link选择样式设置
2022/04/30 Vue.js