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
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
angularJS开发注意事项
2018/05/26 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python while 循环使用的简单实例
2016/06/08 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python实现自动登录后台管理系统
2018/10/18 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
北京华建集团SQL面试题
2014/06/03 面试题
学校后勤人员职责
2013/12/27 职场文书
门前三包责任书
2014/04/15 职场文书
财务会计求职信范文
2015/03/20 职场文书
入党积极分子群众意见
2015/06/01 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技
nginx设置资源请求目录的方式详解
2022/05/30 Servers
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技