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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery 动画与停止动画效果实例详解
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
实现树状结构的两种方法
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python使用sorted排序的方法小结
2017/07/28 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python开头的coding设置方法
2019/08/08 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
进程的查看和调度分别使用什么命令
2013/12/14 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
工程合作意向书范本
2015/05/09 职场文书
催款函怎么写
2015/06/24 职场文书
2016党员入党决心书
2015/09/22 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL