JQuery select(下拉框)操作方法汇总

1. 获取选中项:
获取选中项的Value值:

代码如下:

$('select#sel option:selected').val();

或者

代码如下:

$('select#sel').find('option:selected').val();

获取选中项的Text值:

代码如下:

$('select#seloption:selected').text();

或者

代码如下:

$('select#sel').find('option:selected').text();

2.   获取当前选中项的索引值:


代码如下:

$('select#sel').get(0).selectedIndex;

3.   获取当前option的最大索引值:


代码如下:

$('select#sel option:last').attr("index")

4.   获取DropdownList的长度:


代码如下:

$('select#sel')[0].options.length;

或者

代码如下:

$('select#sel').get(0).options.length;

5.  设置第一个option为选中值:


代码如下:

$('select#sel option:first').attr('selected','true')

或者

代码如下:

$('select#sel')[0].selectedIndex = 0;

6.   设置最后一个option为选中值:


代码如下:

$('select#sel option:last).attr('selected','true')

7.   根据索引值设置任意一个option为选中值:


代码如下:

$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....

8.   设置Value=4 的option为选中值:


代码如下:

$('select#sel').attr('value','4');

或者

代码如下:

$("select#sel option[value='4']").attr('selected', 'true');

9.   删除Value=3的option:


代码如下:

$("select#sel option[value='3']").remove();

10.删除第几个option:


代码如下:

$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....

如删除第3个Radio:

代码如下:

$(" select#sel option ").eq(2).remove();

11.删除第一个option:


代码如下:

$(" select#sel option ").eq(0).remove();

或者

代码如下:

$("select#sel option:first").remove();

12. 删除最后一个option:


代码如下:

$("select#sel option:last").remove();

13. 删除dropdownlist:


代码如下:

$("select#sel").remove();

14.在select后面添加一个option:


代码如下:

$("select#sel").append("<option value='6'>f</option>");

15. 在select前面添加一个option:


代码如下:

$("select#sel").prepend("<option value='0'>0</option>");

16. 遍历option:


代码如下:

$(' select#sel option ').each(function (index, domEle) {
//写入代码
});

(0)

相关推荐

  • jQuery实现下拉框多选 jquery-multiselect 的实例代码

    先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • jquery multiSelect 多选下拉框

    $("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText

  • jQuery实现Select下拉列表进行状态选择功能

    场景: eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等...  此时,若使用Select下拉列表进行状态选择,并在选中具体项值后,通过Ajax异步提交,在效果及体验上就能得到更大化的体验. 下拉列表例子如下: <select id="status"> <option value="0" >待审核</option> <option value="1" >

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

  • jQuery扁平化风格下拉框美化插件FancySelect使用指南

    FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

  • jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示       源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"

  • jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li

  • 基于jQuery实现select下拉选择可输入附源码下载

    我们知道,一般select下拉框是只能选择的,不能用来输入内容的.而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择. 查看演示效果           源码下载 本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果.我们来看下如何使用.

随机推荐