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返回定位插件详解
May 15 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python获取央视节目单的实现代码
2015/07/25 Python
python基本语法练习实例
2017/09/19 Python
Python文件操作函数用法实例详解
2019/12/24 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
土木工程专业自荐信
2013/10/04 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
司机的工作范围及职责
2013/11/13 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
2014年党总支工作总结
2014/12/18 职场文书
工程合作意向书范本
2015/05/09 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技