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手风琴的简单制作
May 12 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jQuery实现影院选座订座效果
Apr 13 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
url decode problem 解决方法
2011/12/26 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
JS防抖和节流实例解析
2019/09/24 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python绘制中国大陆人口热力图
2018/11/07 Python
django 信号调度机制详解
2019/07/19 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
How TDD works
2012/09/30 面试题
新员工入职感言
2014/02/01 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
龙门石窟导游词
2015/02/02 职场文书
廉洁自律证明
2015/06/24 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
详解Python函数print用法
2021/06/18 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技