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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery.parseJSON()函数详解
Feb 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
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
js实现二级导航功能
2017/03/03 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
浅谈javascript错误处理
2019/08/11 Javascript
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python中正则表达式详解
2017/05/17 Python
python数据封装json格式数据
2018/03/04 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python脚本开机自启的实现方法
2019/06/28 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
CSS3 简写animation
2012/05/10 HTML / CSS
学期自我鉴定
2013/11/04 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
你会写请假条吗?
2019/06/26 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript