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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 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
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php fread读取文件注意事项
2016/09/24 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
介绍一下gcc特性
2015/10/31 面试题
高中生期末评语大全
2014/01/28 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
本溪水洞导游词
2015/02/11 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
禁毒主题班会教案
2015/08/14 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis