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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
基于jQuery实现可编辑的表格
Dec 11 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命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js对象的比较
2011/02/26 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python字典DICT类型合并详解
2017/08/17 Python
python实现log日志的示例代码
2018/04/28 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python最小二乘法矩阵
2019/01/02 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python argparse模块应用实例解析
2019/11/15 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
有针对性的求职自荐信
2013/11/14 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
分层教学实施方案
2014/03/19 职场文书
公司委托书格式
2014/08/01 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
责任书格式
2019/04/18 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS