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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery zTree插件使用简单教程
Aug 16 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的一些基础知识分享
2011/07/27 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
JS改变页面颜色源码分享
2018/02/24 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
小程序实现多选框功能
2018/10/30 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
简历上的自我评价怎么写
2014/01/28 职场文书
考试诚信承诺书
2014/05/23 职场文书
离婚协议书范文2015
2015/01/26 职场文书
运动会加油稿30字
2015/07/21 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript