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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现飞机大战小游戏
Jul 05 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
浅析js封装和作用域
2013/07/09 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python制作朋友圈九宫格图片
2019/11/03 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
大学毕业自我鉴定范文
2014/02/03 职场文书
党员组织关系介绍信
2014/02/13 职场文书
爱心捐助倡议书
2014/05/19 职场文书
羊脂球读书笔记
2015/06/30 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
安全责任协议书范本
2016/03/23 职场文书
Python实现byte转integer
2021/06/03 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS