浅析Jquery操作select


Posted in Javascript onDecember 13, 2016

话不多说,请看代码:

<select id="Select1">
  <option value="one">一</option>
  <option value="two">二</option>
  <option value="thr">三</option>
  <option value="tho">四</option>
</select>

注释:

(1)给下拉框赋值:$("#Select1").val(“二”);这时已经选中了 value是two的选项 ,通过$("#Select1")[0].selectedIndex或者$("#Select1").get(0).selectedIndex可以得到此时的索引是1,下拉框的索引是从0开始的

(2)通过设置属性$("#Select1 option[value='two']").attr('selected',true);也可以设置选中  其实就是相当于赋值

(3)得到选中值对应的text:

             1、通过值得到:$("#Select1 option[value='" + 值 + "']").text()或者$("#Select1").find("option[value='" + 值 + "']").text()

             2、通过选中状态得到:$("#Select1").find("option:selected").text()

(4)下拉框的级联:

     很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。

     如:$(".selector1").change(function(){

     // 先清空第二个

     $(".selector2").empty();

     // 实际的应用中,这里的option一般都是用循环生成多个了

var option = $("<option>").val(1).text("pxx");
  $(".selector2").append(option);
  });

(5)通过option中text的值  来选中相应的option的值

var count = $("#Select1 option").length;
    for (var i = 0; i < count; i++) {
     if ($("#Select1").get(0).options[i].text == $(this).val()) {
      $("#Select1").get(0).options[i].selected = true;
      break;
     }
    }

Ps:jquer中去掉前后空格的方法:$.trim(值);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
innerText 使用示例
Jan 23 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
js实现碰撞检测
Jan 29 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 #Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 #Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 #Javascript
JS实现图片垂直居中显示小结
Dec 13 #Javascript
Javascript this 函数深入详解
Dec 13 #Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 #Javascript
简单实现js浮动框
Dec 13 #Javascript
You might like
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python中的集合类型知识讲解
2015/08/19 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
用python计算文件的MD5值
2020/12/23 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
财务主管自我鉴定
2014/01/17 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
项目合作协议书
2014/04/16 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA