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 08 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery append与appendTo方法比较
May 24 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php实现httpRequest的方法
2015/03/13 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
新手上路标语
2014/06/20 职场文书
敬老月活动总结
2014/08/28 职场文书
大足石刻导游词
2015/02/02 职场文书
家长反馈意见及建议
2015/06/03 职场文书
八年级作文之友情
2019/11/25 职场文书