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实现base64前台加密解密功能详解
Aug 29 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python圣诞树编写实例详解
2020/02/13 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python实现手绘图效果实例分享
2020/07/22 Python
python代码实现图书管理系统
2020/11/30 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
给护士表扬信
2014/01/19 职场文书
农贸市场管理制度
2014/01/31 职场文书
爱护草坪标语
2014/06/24 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
导游词之昭君岛
2020/01/17 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL