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实现全选、全不选以及单选功能
Mar 23 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python网络编程之五子棋游戏
2020/05/14 Python
python如何变换环境
2020/07/21 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
防灾减灾标语
2014/10/07 职场文书
办理收楼委托书范本
2014/10/09 职场文书
小学教师教学随笔
2015/08/14 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫