jquery select操作的日期联动实现代码

Jquery的选择器很强大,对select的options对象添加的时候我找了老半天才找到


代码如下:

/**//*
文件名:jquery.liu.select.js
功能说明:本js文件为jquery类库的一个插件,主要实现对select的操作.
作者:John Liu
编写日期:2008/03/12
*/
//得到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;
}

(0)

相关推荐

  • jquery 实现二级/三级/多级联动菜单的思路及代码

    本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增长字段 City_Name:城市名称 City_Code:城市代码 我们根据城市代码来查询省.市.区.城市代码结构大致如下: 内蒙古:150000,呼和浩特:150100,新城区:150101. 其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号

  • jQuery 联动日历实现代码

    来看下效果图 一.先来说下功能: 1.点击"确定"显示日历 2.再次点击隐藏,或从DOM中删除这个日历.如些反复第一,和第二这两步. 3.让日历中显示当前月份日期(多少天,每天是多少号). 4.让当前月份的日期和星期几对应. 5.让左边两边的日历关联起来. 二.再来说下HTML结构. 1.上面蓝色的是一个DIV,显示当前月分,和上月,下月. 2.下面的日期和星期,是用一个table结构存放数据.星期用thead,日期用:tbody存放. 三.功能展开分析: 3.1.前两个功能? 让我想

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • 基于JQUERY的多级联动代码

    jquery.select.more.js 复制代码 代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu

  • Jquery实现无刷新DropDownList联动实现代码

    先看HTML,我们引用Jquery,放两个DropDownList: 复制代码 代码如下: <style type="text/css"> #ddlEmployeeCars { display:none; position:absolute; top:50px; left:9px; } </style> <script language="javascript" type="text/javascript" src=

  • 用Jquery实现多级下拉框无刷新的联动

    最开始准备用.NET只带的AJAX实现,发现达不到想要的效果.后来采取JQuery中AJAX功能,通过异步调用C#写的web服务实现. load()方法可以说是JQuery中最简单的AJAX方法,它用于获取目标服务器的响应并将结果显示到页面上.load方法就是Jquery对AJAX的包装.还可以使用$.post()和$.get()来实现post或get方式的AJAX调用,对于复杂的情况,还可以使用AJAX()方法.

  • 基于JQuery的日期联动实现代码

    实现目标: 两个日期,有下拉框: 复制代码 代码如下: <head> //导入jquery地址 <script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script> <script type="text/javascript"> //startYear发生变化 function change

  • jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap">         <div class="nice-select" name="nice-select&

  • jQuery 下拉列表 二级联动插件分享

    jQuery二级联动插件:jQuery.selected 一个页面可以引用多个联动效果,使用方法: 配置js: 复制代码 代码如下: var defaults = { NextSelId: '#Select2', SelTextId: '#Text1', Separator: '--', SelStrSet: [ { name: '请选择', subname: '请选择'}, { name: '★高起本★', subname: '计算机科学与技术|汉语言文学' }, { name: '★高起专★

  • 简单实用jquery版三级联动select示例

    html和js部分 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList</title> <style type="text/css"> *{margin:0;padding:0;} .selectList{width:200px;margin:50px auto;} </style>

  • jQuery实现日期联动效果实例

    本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q

  • JQuery打造省市下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面.考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容.用JQuery实现比较容易,代码以省市联动效果为例实现. JSP页面代码如下: 复制代码 代码如下: <li id="base"> <p>生源地:</p> <label> <select id=&

  • jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态

    功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中,在页面上引用即可调用 复制代码 代码如下: //获取cookie值function readCookie(name) {    var cookieValue = "";    var search = name + "=";    if (document.cookie.length > 0) {       

随机推荐