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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现简单弹幕制作
Dec 10 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
python判断字符串是否是json格式方法分享
2017/11/07 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python中new方法的详解
2019/01/15 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
用python绘制樱花树
2020/10/09 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
高中运动会入场词
2014/02/14 职场文书
活动总结报告格式
2014/05/09 职场文书
高效课堂标语
2014/06/26 职场文书
保研推荐信格式
2015/03/25 职场文书
小学运动会报道稿
2015/07/22 职场文书
python 网络编程要点总结
2021/06/18 Python
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers