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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
PHP4在Windows2000下的安装
2006/10/09 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php简单复制文件的方法
2016/05/09 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Java多态性的定义以及类型
2014/09/16 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
全运会口号
2014/06/20 职场文书
施工安全责任书范本
2014/07/24 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
个人德育工作总结
2015/03/05 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python