浅析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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 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
PHP的拦截器实例分析
2014/11/03 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
js获取form的方法
2015/05/06 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python学习笔记之多进程
2020/08/06 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
团支书的期末学习总结自我评价
2013/11/01 职场文书
装饰活动策划方案
2014/02/11 职场文书
工程承包协议书
2014/04/22 职场文书
企业消防安全责任书
2014/07/23 职场文书
争先创优演讲稿
2014/09/15 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
同学联谊会邀请函
2019/06/24 职场文书
全新239军机修复记
2022/04/05 无线电
spring 项目实现限流方法示例
2022/07/15 Java/Android