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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
由php的call_user_func传reference引发的思考
2010/07/23 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
Python实现二叉堆
2016/02/03 Python
python实现textrank关键词提取
2018/06/22 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
详解Python中的路径问题
2020/09/02 Python
Pycharm安装python库的方法
2020/11/24 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
销售主管竞聘书
2014/03/31 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015年工商所工作总结
2015/05/21 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android