您的位置：首页 > Web前端 > JQuery

jquery 实现对select操作的日期联动

2009-12-05 22:12 615 查看
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Select.aspx.cs" Inherits="jquery_Learning.Select" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<mce:script type="text/javascript" src="JQUERY.JS" mce_src="JQUERY.JS"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
for(var i=1990;i<2009;i++){
$("#sel1").get(0).options.add(new Option(i,i));
}
for(var i=1;i<=12;i++){
$("#sel2").get(0).options.add(new Option(i,i));
}
for(var i=1;i<=31;i++){
$("#sel3").get(0).options.add(new Option(i,i));
}
$("#sel1").change(function(){
$("#sel3").empty();
getValue($("#sel2").val(),$("#sel1").val());
});
$("#sel2").change(function(){
$("#sel3").empty();
getValue($("#sel2").val(),$("#sel1").val());
});

});
function getValue(i,k){
var k=k-0;
switch(i){
case "1":
case "3":
case "7":
case "8":
case "10":
case "12":{
AddValue(31);
break;
}

case "2":{
if(k%4==0){
AddValue(29);
}else{
AddValue(28);
}
break;
}

case "4":
case "5":
case "6":
case "9":
case "11":{
AddValue(30);
break;
}
default:{
alert(i+"asdf"+k);
break;
}
}
}

function AddValue(i){
for(var k=1;k<=i;k++){
$("#sel3").get(0).options.add(new Option(k,k));
}
}

// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="sel1" ></select>
<select id="sel2"></select>
<select id="sel3"></select>
</div>
</form>
</body>
</html>


是很简单的代码 不过我自己操作的时候才发现我自己还有很多不懂，要多操场才发现问题，哎~~

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

 

附上我从网上找到的jQuery对select操作的封装方法

/**//*
文件名: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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery function xhtml server html c#
相关文章推荐
新的分享
章节导航