最近使用JQuery来编写前端js脚本,涉及到依据下拉框的值确定其他下拉框中数据项。需要实现对下拉框中候选项的添加删除等,使用 js写的话简直会死人的。还好使用JQuery。以下是操作 下拉列表的常用功能:
1.获取列表项中候选项的数目。
2.获得选中项的索引值。
3.获得当前选中项的值
4.设定选择值
5.设定选择项
// 得到select项的个数
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操作select
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
Jquery操作select标签:包含选中、更改选中;获取选中option的text值、value值和ndex索引值;标签的清空、删除和增加等。
Jquery模拟select效果实现,纯自写,简单实用,可自行修改样式。
下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select
简单实用的jquery select2组件
Jquery中对下拉框的操作 包括选中 赋值等
jquery select2 select美化插件
这个文档是本人在开发学习中下的别人的资料,觉得汇总的很好,后面在工作过程中修改了一些,非常有用,尤其是前端的,基本上对select option的操作都在这里面了。有收藏价值。
jquery 超级select插件 v4.0版本
使用Selenium自带的API操作Select元素时页面可能出现上移或遮挡,导致元素操作失败; 介于此问题,可以使用JQuery来操作Select元素,具体实现见附件。
jQuery实现select样式美化 jQselect.js
jquery select2 html select 内容搜索 下拉框搜索
Jquery获取Select标签的值
一个带下拉模糊搜索的select,替换下拉内容后即可直接使用,只需要把对应文件放到指定文件夹中引用即可
* 模拟select * @param {box,tiggle} * @param box 父级别容器[模拟select最外围标签] * @param tiggle 展开事件 [*click | mouseover | 其他dom事件] * @return object 返回对象本身 * @disription 节点(html)内部...
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
jQuery获取Select标签的手册 单选组radio: $("input[type=radio][checked]").val(); 下拉框select的value值: $('select').val(); 下拉框select选中的text 值:$("select").find("option:selected").text();