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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
基于webpack.config.js 参数详解
2018/03/20 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
优秀民警事迹材料
2014/01/29 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
被告代理词范文
2015/05/25 职场文书
鉴史问廉观后感
2015/06/10 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
详解Python类和对象内容
2021/06/22 Python
Golang jwt身份认证
2022/04/20 Golang