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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现滑动开关效果
Aug 02 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
高中物理教学反思
2014/02/08 职场文书
法制报告会主持词
2014/04/02 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Javascript 解构赋值详情
2021/11/17 Javascript