JQuery 获取多个select标签option的text内容(实例)


Posted in jQuery onSeptember 07, 2017

根据option的id属性,修改text值

$("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true);
 $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true);
 $("#sel_div .select_class option[id='-选择区-']").text( data.area).attr("selected",true);
 $("#sel_div .select_class option[id='-选择街-']").text( data.street).attr("selected",true);

获取多个select(使用class属性,切值相同)下的所有option的text值

$("#sel_div .select_class option").each(function(){ //遍历所有option标签

   var text = $(this).text(); //获取option的text
   alert(text);//显示的是当前这个option的text值
 if(txt == "选择省")
     $("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true);
   if(txt == "选择市")
     $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true);
   if(txt == "选择区")
     $("#sel_div .select_class option[id='-选择区-']").text( data.area).attr("selected",true);
  if(txt == "选择街")
     $("#sel_div .select_class option[id='-选择街-']").text( data.street).attr("selected",true);

 });

如果select中间没有级联关系,那么所有的option都已经加载,可以使用下面的方法显示查询出来的数据

$("#sel_div .select_class option[id="+data.province+"]").attr("selected",true);
$("#sel_div .select_class option[id="+data.city+"]").attr("selected",true);
$("#sel_div .select_class option[id="+data.area+"]").attr("selected",true);
$("#sel_div .select_class option[id="+data.street+"]").attr("selected",true);

另一种获取所有option的方法,相当于将所有text拼成字符串,把每个字符存进map中

var map = $("#sel_div .select_class option").map(function(){

    alert($(this).text());//显示单个option的text  text1

    return $(this).text();
  }).get().join(",");

alert(map);//显示的是 text1,text2,text3
alert(map[0]);//显示 t

在上面的基础上进行改进,使用array数组存放查询出来的数据,在使用for循环可以对数据进行操作

var array = new Array();
  $("#leaf .form-control option").map(function(){
    array.push($(this).text());
  })
  for(var i = 0; i < array.length; i ++ ){
    alert(array[i]);//显示每个option的text  text1,text2,text3
  }

以上这篇JQuery 获取多个select标签option的text内容(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
You might like
桌面中心(二)数据库写入
2006/10/09 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP整合PayPal支付
2015/06/11 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
js实现楼层导航功能
2017/02/23 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
个人实习生的自我评价
2014/02/16 职场文书
面试自我评价范文
2014/09/17 职场文书
介绍信的写法
2015/01/31 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
电影开国大典观后感
2015/06/04 职场文书
从事会计工作年限证明
2015/06/23 职场文书
总经理年会致辞
2015/07/29 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang