jQuery如何操作下拉框select
jQuery如何操作下拉框select
jQuery如何操作下拉框select一、Jquery中select操作的定义
//得到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操作的实例
1、jquery获取当前选中select的text值
var
checkText=$(
"#slc1"
).find(
"option:selected"
).text();
2、jquery获取当前选中select的value值
var
checkValue=$(
"#slc1"
).val();
3、jquery获取当前选中select的索引值
var
index=$(
"#slc1 "
).get(0).selectedIndex;
4、jquery获取指定select的最大索引值
var
maxIndex=$(
"#slc1 option:last"
).attr(
"index"
);
5、jquery设置索引值为1的项为当前选中项
$(
"#slc1 "
).get(0).selectedIndex=1;
6、jquery设置value值2的项为当前选中项
$(
"#slc1 "
).val(2);
7、jquery设置text值为"青藤园"的项为当前选中项
$(
"#slc1 option[text='青园w']"
).attr(
"selected"
,
true
);
8、为指定select下拉框追加一个option(追加到在末尾)
$(
"#slc2"
).append(
""
+i+
""
);
9、为制定select下拉框插入一个option(插入到第一个位置)
$(
"#slc2"
).prepend(
"请选择"
);
10、jquery删除select下拉框的最后一个option
热门推荐
- python爬虫第一本书(我用Python抓取了7000 多本电子书案例详解)
- 宝塔面板密码忘记了怎么解锁(宝塔面板忘记用户名密码怎么找回)
- mysql最佳配置(详解DBeaver连接MySQL8以上版本以及解决可能遇到的问题)
- 如何查看本机docker的安装目录(使用rpm安装指定版本docker1.12.6的详细步骤)
- mysql事务特性和隔离级别(Mysql事务特性和级别原理解析)
- iis搭建网站的地址(IIS站点所有文件直接下载 强制下载)
- mysql把重复数据删掉(mysql查找删除重复数据并只保留一条实例详解)
- vue 父组件传值(Vue两个同级组件传值实现)
- mysql数据库基本增删改查基本语句(MySQL表的增删改查基础教程)
- ASP.NET身份验证方式