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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery常用选择器详解
Jul 17 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现电梯导航模块
Dec 22 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验证复选框有效性的示例
2013/11/13 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
Javascript冒泡排序算法详解
2014/12/03 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript多线程详解
2015/08/12 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python制作数据导入导出工具
2015/07/31 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
学python需要去培训机构吗
2020/07/01 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
几道PHP面试题
2013/04/14 面试题
贸易经济专业自荐书
2014/06/29 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
美术教师个人工作总结
2015/02/06 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
详解flex:1什么意思
2022/07/23 HTML / CSS