博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery操作select
阅读量:6487 次
发布时间:2019-06-24

本文共 3086 字,大约阅读时间需要 10 分钟。

     最近使用JQuery来编写前端js脚本,涉及到依据下拉框的值确定其他下拉框中数据项。需要实现对下拉框中候选项的添加删除等,使用js写的话简直会死人的。还好使用JQuery。以下是操作 下拉列表的常用功能:

1.获取列表项中候选项的数目。

2.获得选中项的索引值。

3.获得当前选中项的值

4.设定选择值

5.设定选择项

...

  1 
//
得到select项的个数   
  2 
jQuery.fn.size 
=
 
function
(){   
  3 
    
return
 jQuery(
this
).get(
0
).options.length;   
  4 
}   
  5 
  6 
//
获得选中项的索引   
  7 
jQuery.fn.getSelectedIndex 
=
 
function
(){   
  8 
    
return
 jQuery(
this
).get(
0
).selectedIndex;   
  9 
}   
 10 
 11 
//
获得当前选中项的文本   
 12 
jQuery.fn.getSelectedText 
=
 
function
(){   
 13 
    
if
(
this
.size() 
==
 
0
return
 
"
下拉框中无选项
"
;   
 14 
    
else
{   
 15 
        
var
 index 
=
 
this
.getSelectedIndex();         
 16 
        
return
 jQuery(
this
).get(
0
).options[index].text;   
 17 
    }   
 18 
}   
 19 
 20 
//
获得当前选中项的值   
 21 
jQuery.fn.getSelectedValue 
=
 
function
(){   
 22 
    
if
(
this
.size() 
==
 
0
)    
 23 
        
return
 
"
下拉框中无选中值
"
;   
 24 
       
 25 
    
else
 
 26 
        
return
 jQuery(
this
).val();   
 27 
}   
 28 
 29 
//
设置select中值为value的项为选中   
 30 
jQuery.fn.setSelectedValue 
=
 
function
(value){   
 31 
    jQuery(
this
).get(
0
).value 
=
 value;   
 32 
}   
 33 
 34 
//
设置select中文本为text的第一项被选中   
 35 
jQuery.fn.setSelectedText 
=
 
function
(text)   
 36 
{   
 37 
    
var
 isExist 
=
 
false
;   
 38 
    
var
 count 
=
 
this
.size();   
 39 
    
for
(
var
 i
=
0
;i
<
count;i
++
)   
 40 
    {   
 41 
        
if
(jQuery(
this
).get(
0
).options[i].text 
==
 text)   
 42 
        {   
 43 
            jQuery(
this
).get(
0
).options[i].selected 
=
 
true
;   
 44 
            isExist 
=
 
true
;   
 45 
            
break
;   
 46 
        }   
 47 
    }   
 48 
    
if
(
!
isExist)   
 49 
    {   
 50 
        alert(
"
下拉框中不存在该项
"
);   
 51 
    }   
 52 
}   
 53 
//
设置选中指定索引项   
 54 
jQuery.fn.setSelectedIndex 
=
 
function
(index)   
 55 
{   
 56 
    
var
 count 
=
 
this
.size();       
 57 
    
if
(index 
>=
 count 
||
 index 
<
 
0
)   
 58 
    {   
 59 
        alert(
"
选中项索引超出范围
"
);   
 60 
    }   
 61 
    
else
 
 62 
    {   
 63 
        jQuery(
this
).get(
0
).selectedIndex 
=
 index;   
 64 
    }   
 65 
}   
 66 
//
判断select项中是否存在值为value的项   
 67 
jQuery.fn.isExistItem 
=
 
function
(value)   
 68 
{   
 69 
    
var
 isExist 
=
 
false
;   
 70 
    
var
 count 
=
 
this
.size();   
 71 
    
for
(
var
 i
=
0
;i
<
count;i
++
)   
 72 
    {   
 73 
        
if
(jQuery(
this
).get(
0
).options[i].value 
==
 value)   
 74 
        {   
 75 
            isExist 
=
 
true
;   
 76 
            
break
;   
 77 
        }   
 78 
    }   
 79 
    
return
 isExist;   
 80 
}   
 81 
//
向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示   
 82 
jQuery.fn.addOption 
=
 
function
(text,value)   
 83 
{   
 84 
    
if
(
this
.isExistItem(value))   
 85 
    {   
 86 
        alert(
"
待添加项的值已存在
"
);   
 87 
    }   
 88 
    
else
 
 89 
    {   
 90 
        jQuery(
this
).get(
0
).options.add(
new
 Option(text,value));   
 91 
    }   
 92 
}   
 93 
//
删除select中值为value的项,如果该项不存在,则提示   
 94 
jQuery.fn.removeItem 
=
 
function
(value)   
 95 
{       
 96 
    
if
(
this
.isExistItem(value))   
 97 
    {   
 98 
        
var
 count 
=
 
this
.size();           
 99 
        
for
(
var
 i
=
0
;i
<
count;i
++
)   
100 
        {   
101 
            
if
(jQuery(
this
).get(
0
).options[i].value 
==
 value)   
102 
            {   
103 
                jQuery(
this
).get(
0
).remove(i);   
104 
                
break
;   
105 
            }   
106 
        }           
107 
    }   
108 
    
else
 
109 
    {   
110 
        alert(
"
待删除的项不存在!
"
);   
111 
    }   
112 
}   
113 
//
删除select中指定索引的项   
114 
jQuery.fn.removeIndex 
=
 
function
(index)   
115 
{   
116 
    
var
 count 
=
 
this
.size();   
117 
    
if
(index 
>=
 count 
||
 index 
<
 
0
)   
118 
    {   
119 
        alert(
"
待删除项索引超出范围
"
);   
120 
    }   
121 
    
else
 
122 
    {   
123 
        jQuery(
this
).get(
0
).remove(index);   
124 
    }   
125 
}   
126 
//
删除select中选定的项   
127 
jQuery.fn.removeSelected 
=
 
function
()   
128 
{   
129 
    
var
 index 
=
 
this
.getSelectedIndex();   
130 
    
this
.removeIndex(index);   
131 
}   
132 
//
清除select中的所有项   
133 
jQuery.fn.clearAll 
=
 
function
()   
134 
{   
135 
    jQuery(
this
).get(
0
).options.length 
=
 
0
;   
136 

转载于:https://www.cnblogs.com/netwenchao/archive/2009/08/21/1551538.html

你可能感兴趣的文章
新鲜出炉的电信诈骗经历
查看>>
SpringCloud源码:Ribbon负载均衡分析
查看>>
vue中axios请求的封装
查看>>
深入Java -JVM 垃圾回收
查看>>
web性能測試工具-沒還有實驗-URL收集_无需整理
查看>>
测试过程中的防忽悠沟通法
查看>>
第五章 文本编辑器 vi 命令-centos7.5知识
查看>>
我的友情链接
查看>>
小型车、中型车、大型车、重型车的区分和定义见下表:
查看>>
工作多年的.NET程序员,是否建立了自己的开发知识库?分享制作电子书的经验...
查看>>
网络端口号大全
查看>>
非常不错的sharepoint webpart工具集
查看>>
腾讯微博Android客户端开发——OAuth认证介绍
查看>>
UIView的属性使用
查看>>
关于linux内核模块的装载过程
查看>>
linux下gcc升级
查看>>
zabbix的安装监控windows,linux操作流程
查看>>
segue和delegate实现两个页面传值
查看>>
Windows中安装Emacs
查看>>
谷歌发布“虚拟现实化”游戏 Ingress
查看>>