Jquery其实本身可以操作select表单,但是由于比较反锁,没有.net 控件那样去操作方便,我在网上Google了一会,发现了一个不错的专门操作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.js
然后再引入这个js文件,然后你就可以使用这些方法了
分享到:
相关推荐
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
jquery.selectlist.js下拉框美化插件是一款绿色清新风格简单的表单select下拉框美化特效,让下拉框看起来更加漂亮,不再单调。
这是一款基于jquery.selectlist.js插件实现的下拉框美化特效,简单的jQuery select下拉框美化代码。
jquery.editable-select插件
jquery三级联动省市地区插件CitySelect,怎么资源分越来越贵了
jQuery自定select下拉框样式插件jquery.select.js
chosen_v1.2.0.zip chosen.jquery.js jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能 下载地址:...
jquery.jSelectDate.js 下拉列表式日期选择器插件实例,裸体版基本没有美化,其实这样更方便使用者自己美化,有些人可能会比较喜欢这种select列表式的日期选择功能,和个人习惯有关。功能介绍:1.支持闰年、大小月和...
这是一款select下拉框的效果主要是运用jquery.select.js插件进行操作的非常简便易用
此为jquery.editable-select插件的使用案例,这是一款非常好用的插件,好用之处:既可下拉框选择也可手动输入,而且手动输入还能对下拉框选项进行过滤,而且还可实现一些相关事件,具体请查看官方文档。
IE6下解决弹出div 被父页面...下载jquery.bgiframe.js ,在我的下载资源中有 2.需要修改div的属性,使用 $(function(){ $('#addDiv').bgiframe(); }); 下面是addDiv html: <input /> <SELECT/> </div>
jquery 封装select实现select自定义样式的完美插件jquery.easydropdown.min.js
包含扩展jquery.accordion.js、jquery.combobox.js、jquery.datagrid.js、jquery.datebox.js、jquery.dialog.js...js、jquery.select2.js、jquery.tabs.js、jquery.tooltip.js、jquery.tree.js、jquery.validatebox.js
editable select 可输入可实时查询的下拉选
基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是,原来的zhangjingwei的模拟在显示方式上的问题。在跟文字...
1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...
jquery.multiselect 下拉多选插件 下拉复选框插件 可以直接使用的demo
改写下jquery.searchableSelect.js 支持汉字模糊查询,里面有汉字库,如果没有的汉字请按规则加入
jquery下拉框选择select美化插件FancySelect.js