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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现推拉门效果
Oct 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
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
第十四节--命名空间
2006/11/16 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
python机器学习库常用汇总
2017/11/15 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
公司总经理岗位职责
2014/03/15 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
公务员考察材料范文
2014/12/23 职场文书
会计实训总结范文
2015/08/03 职场文书
python OpenCV学习笔记
2021/03/31 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL