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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
sql注入与转义的php函数代码
2013/06/17 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
js select常用操作控制代码
2010/03/16 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
Python按行读取文件的简单实现方法
2016/06/22 Python
Python Socket编程详细介绍
2017/03/23 Python
Python探索之pLSA实现代码
2017/10/25 Python
使用python实现knn算法
2017/12/20 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python返回数组/List长度的实例
2018/06/23 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python自动化发送邮件实例讲解
2021/01/04 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
企业门卫岗位职责
2013/12/12 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
环境工程专业自荐信
2014/03/03 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Android中View.post和Handler.post的关系
2022/06/05 Java/Android