`

Jquery操作Select 一个js插件

阅读更多
jQuery.fn.size = function() 
{ 
return jQuery(this).get(0).options.length; 
} 
//获得选中项的索引 
jQuery.fn.getSelectedIndex = function() 
{ 
return jQuery(this).get(0).selectedIndex; 
} 
//获得当前选中项的文本 
jQuery.fn.getSelectedText = function() 
{ 
if(this.size() == 0) 
{ 
return "下拉框中无选项"; 
} 
else 
{ 
var index = this.getSelectedIndex(); 
return jQuery(this).get(0).options[index].text; 
} 
} 
//获得当前选中项的值 
jQuery.fn.getSelectedValue = function() 
{ 
if(this.size() == 0) 
{ 
return "下拉框中无选中值"; 
} 
else 
{ 
return jQuery(this).val(); 
} 
} 
//设置select中值为value的项为选中 
jQuery.fn.setSelectedValue = function(value) 
{ 
jQuery(this).get(0).value = value; 
} 
//设置select中文本为text的第一项被选中 
jQuery.fn.setSelectedText = function(text) 
{ 
var isExist = false; 
var count = this.size(); 
for(var i=0;i<count;i++) 
{ 
if(jQuery(this).get(0).options[i].text == text) 
{ 
jQuery(this).get(0).options[i].selected = true; 
isExist = true; 
break; 
} 
} 
if(!isExist) 
{ 
alert("下拉框中不存在该项"); 
} 
} 
//设置选中指定索引项 
jQuery.fn.setSelectedIndex = function(index) 
{ 
var count = this.size(); 
if(index >= count || index < 0) 
{ 
alert("选中项索引超出范围"); 
} 
else 
{ 
jQuery(this).get(0).selectedIndex = index; 
} 
} 
//判断select项中是否存在值为value的项 
jQuery.fn.isExistItem = function(value) 
{ 
var isExist = false; 
var count = this.size(); 
for(var i=0;i<count;i++) 
{ 
if(jQuery(this).get(0).options[i].value == value) 
{ 
isExist = true; 
break; 
} 
} 
return isExist; 
} 
//向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示 
jQuery.fn.addOption = function(text,value) 
{ 
if(this.isExistItem(value)) 
{ 
alert("待添加项的值已存在"); 
} 
else 
{ 
jQuery(this).get(0).options.add(new Option(text,value)); 
} 
} 
//删除select中值为value的项,如果该项不存在,则提示 
jQuery.fn.removeItem = function(value) 
{ 
if(this.isExistItem(value)) 
{ 
var count = this.size(); 
for(var i=0;i<count;i++) 
{ 
if(jQuery(this).get(0).options[i].value == value) 
{ 
jQuery(this).get(0).remove(i); 
break; 
} 
} 
} 
else 
{ 
alert("待删除的项不存在!"); 
} 
} 
//删除select中指定索引的项 
jQuery.fn.removeIndex = function(index) 
{ 
var count = this.size(); 
if(index >= count || index < 0) 
{ 
alert("待删除项索引超出范围"); 
} 
else 
{ 
jQuery(this).get(0).remove(index); 
} 
} 
//删除select中选定的项 
jQuery.fn.removeSelected = function() 
{ 
var index = this.getSelectedIndex(); 
this.removeIndex(index); 
} 
//清除select中的所有项 
jQuery.fn.clearAll = function() 
{ 
jQuery(this).get(0).options.length = 0; 
} 
分享到:
评论

相关推荐

    jquery.selectlist.js插件实现的下拉框美化特效

    `jquery.selectlist.js`插件是基于JavaScript库jQuery构建的,jQuery是一个轻量级的、高性能的库,使得开发者能够更容易地进行DOM操作、事件处理、动画效果以及Ajax交互。通过利用jQuery的强大功能,`jquery.select...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    `jquery.easydropdown.min.js`是一个轻量级的jQuery插件,它的主要功能是将传统的Select元素转换为具有自定义样式的下拉菜单。这个插件通过JavaScript和CSS实现了高度可定制的外观和行为,同时保持了原生Select的...

    select2(jquery)插件下载

    **jQuery Select2插件详解** Select2是一款基于jQuery...通过以上介绍,我们可以看到jQuery Select2插件的强大之处,它不仅提升了用户体验,也为开发者提供了丰富的定制选项,是构建现代Web应用时不可或缺的一个工具。

    jquery.selectlist.js插件实现的下拉框美化特效.zip

    首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得开发者能更高效地构建交互式网页。在本案例中,`jquery.selectlist.js`插件正是基于jQuery构建的,旨在提供一种优雅...

    [转]Jquery操作select 收藏

    文件"jQuery-Select-bynet.htm"可能就是一个示例代码或插件的文档,它可能包含了更高级的select操作示例,如模拟多级联动下拉菜单或者自定义的下拉列表样式。 总的来说,掌握jQuery操作select的方法对于前端开发来...

    jquery.selectlist.js下拉框美化插件

    `jQuery.selectlist.js`是一款专门针对HTML Select元素进行美化处理的JavaScript插件。它不仅提供了丰富的自定义选项,还能与现有的jQuery代码无缝集成,使得开发者能够轻松地将普通的下拉框转换为具有视觉吸引力的...

    jquery 超级select插件 v4.0版本

    jQuery超级Select插件v4.0版本是一个强大且灵活的工具,它为Web开发者提供了丰富的功能和定制选项,帮助提升Select元素的用户体验。通过深入理解和合理运用,开发者可以构建出更加便捷、高效的表单交互。无论是在...

    JQuery插件select2

    - **基本用法**:展示如何初始化一个简单的Select2实例,并解释相关配置选项。 - **自定义模板**:说明如何使用自定义模板来调整选项的显示样式。 - **事件监听**:讲解如何监听和响应Select2的各种事件,如打开、...

    jquery下拉菜单插件SelectMenu

    总的来说,`SelectMenu.js` 是一个强大的 jQuery 下拉菜单插件,它以其简洁、易用和多样化的特性,为网页开发带来了更优的用户体验。无论是在简单的网页还是复杂的 Web 应用中,它都能很好地适应并发挥其作用。

    jQuery模拟select下拉框插件.zip

    "jQuery模拟select下拉框插件"就是这样一个工具,它提供了更丰富的交互性和定制性,相比原生的HTML下拉框控件,能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先,原生的`&lt;select...

    jquery select 多种下拉日期选择插件

    这个标题暗示了我们正在讨论一个基于jQuery的插件,它的功能是为HTML的select元素添加多样的日期选择选项。通常,这种插件会扩展input类型的元素,使得用户可以通过下拉菜单或日历视图快速选取日期,而不必手动输入...

    jquery.selectlist.js

    `jquery.selectlist.js`是一个专门用于优化Select下拉框的JavaScript插件,它主要目标是提高用户体验,尤其是在老旧的IE6及以上的浏览器中。在前端技术日新月异的今天,虽然许多现代浏览器已经提供了丰富的原生功能...

    强大的jquery下拉分页选择插件SelectPage

    接下来,你需要在HTML中创建一个元素(通常是`&lt;select&gt;`标签),然后通过jQuery来初始化SelectPage.js插件: ```javascript $(document).ready(function() { $('#your-select-element').selectPage({ pageSize: ...

    jQuery select下拉框单选和多选插件

    **jQuery select下拉框单选和多选插件** 在Web开发中,下拉框(select)是常用的一种用户交互元素,它用于提供多个选项供用户选择。然而,原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...

    jquery下拉框选择select美化插件FancySelect.js.zip

    在这个场景中,"jquery下拉框选择select美化插件FancySelect.js.zip" 提供了一个解决方案,专门针对HTML中的`&lt;select&gt;`元素进行美化,提升网页的视觉体验。 `&lt;select&gt;`是HTML中用于创建下拉列表的标签,但其默认...

    jquery select插件带搜索框的下拉选择框代码

    在本文中,我们将深入探讨如何使用jQuery的"searchableSelect"插件来创建一个具有搜索功能的下拉选择框。这个插件对于那些需要在大量选项中快速查找和选择的项目非常有用,它大大提升了用户体验。 首先,让我们了解...

    jQuery multiple-select-master 插件

    总的来说,jQuery multiple-select-master插件以其强大的功能和易用性,为网页开发中的多选操作带来了便利,无论是小型项目还是大型应用,都能看到它的身影。熟练掌握并运用这个插件,无疑能提升我们的开发效率,为...

    jquery插件-select2

    综上所述,Select2是一个强大且灵活的jQuery插件,它使得传统的HTML下拉框变得生动有趣,提高了用户体验。通过深入了解其功能和API,开发者可以轻松地在项目中集成并定制Select2,实现各种复杂的下拉框需求。

    jquery select2组件

    `Select2`的初始化方法接受一个配置对象,其中包含各种选项,如: ```javascript $('.select2').select2({ placeholder: '请选择...', // 设置占位符文本 allowClear: true, // 是否允许清除选择 ...

    jQuery-ComboSelect插件

    首先,jQuery-ComboSelect的核心功能是将传统的单选或单行的下拉列表转换为一个可多选、具有搜索功能的下拉框。用户可以通过输入关键词快速筛选出所需选项,提高了数据查找和选择的效率。这对于那些包含大量选项的...

Global site tag (gtag.js) - Google Analytics