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事件(实例讲解)
Jul 18 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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将数据库导出成excel的方法
2010/05/07 PHP
php 地区分类排序算法
2013/07/01 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python 中的with关键字使用详解
2016/09/11 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
pycharm 安装JPype的教程
2019/08/08 Python
python属于软件吗
2020/06/18 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
超市端午节活动方案
2014/01/23 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
房屋继承公证书
2014/04/10 职场文书
养牛场项目建议书
2014/05/13 职场文书
学校党员对照检查材料
2014/08/28 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
php解析非标准json、非规范json的方式实例
2022/05/10 PHP