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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现动态操作table行
Nov 23 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python中字符串的格式化方法小结
2016/05/03 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
浅谈Python中的继承
2020/06/19 Python
python如何写个俄罗斯方块
2020/11/06 Python
自动化系在校本科生求职信
2013/10/23 职场文书
先进个人获奖感言
2014/01/24 职场文书
校园安全教育广播稿
2014/02/17 职场文书
小鞋子观后感
2015/06/05 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python