jQuery操作选中select下拉框的值代码实例


Posted in jQuery onFebruary 07, 2020

这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了。
获取select下拉框的几种情况如下:

1.获取第一个option的值

$('#test option:first').val();

2.最后一个option的值

$('#test option:last').val();

3.获取第二个option的值

$('#test option:eq(1)').val();

依次类推可以获取第三个、第四个option的值

4.获取选中的值

var groupid = $("#groupid").find("option:checked").val();
$('#groupidoption:selected').val();
$('#groupid').val();
<td align="center" class="tableFormLabel" >
  <select id="groupid" class="input-text" > </select>
</td>

5.设置值为2的option为选中状态

$('#test').attr('value','2');

6.设置最后一个option为选中

$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());

7.获取select的长度

$('#test option').length;

8.添加一个option

var str="<option value='n+1'>第N+1项</option>";
$("#test").append(str); //一般都用这个追加

$("<option value='n+1'>第N+1项</option>").appendTo("#test");

9.删除选中项

$('#test option:selected').remove();

10.删除项选中的第一项

$('#test option:first').remove();

11.删除满足条件的option

$('#test option').each(function(){
  if( $(this).val() == '5'){
    $(this).remove();
  }
});

$('#test option[value=5]').remove();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
js读取本地文件的实例
2017/12/22 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
NestJs 静态目录配置详解
2019/03/12 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
学生周末长期请假条
2014/02/15 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Win10系统下配置Java环境变量
2021/06/13 Java/Android