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 dataTable 获取某行数据
May 05 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery弹框插件使用方法详解
May 26 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多线程编程之管道通信实例分析
2015/03/07 PHP
PHP实现八皇后算法
2019/05/06 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python 专题四 文件基础知识
2017/03/20 Python
用Python设计一个经典小游戏
2017/05/15 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
开门红主持词
2014/04/02 职场文书
网络优化专员求职信
2014/05/04 职场文书
学校教师读书活动总结
2014/07/08 职场文书
社区创先争优承诺书
2014/08/30 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
初中同学会致辞
2015/08/01 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android