以下是部分代码

/**//**

*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。

*使用方法：

* (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this)">

* (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this)">

* (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this)">

*设置参数的方法

* (1)设置日期分隔符setDateSplit(strSplit)默认为"-"

* (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit)默认为" "

* (3)设置时间分隔符setTimeSplit(strSplit)默认为":"

* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit)

* (5)设置开始和结束年份setYearPeriod(intDateBeg,intDateEnd)

*说明：

* 默认返回的日期时间格式如同：2005-02-02 08:08

*/

//------------------ 样式定义 ---------------------------//

//功能按钮同样样式

var s_tiannet_turn_base = "height:16pxfont-size:9ptcolor:whiteborder:0 solid #CCCCCCcursor:handbackground-color:#2650A6"

//翻年、月等的按钮

var s_tiannet_turn = "width:28px" + s_tiannet_turn_base

//关闭、清空等按钮样式

var s_tiannet_turn2 = "width:22px" + s_tiannet_turn_base

//年选择下拉框

var s_tiannet_select = "width:64pxdisplay:none"

//月、时、分选择下拉框

var s_tiannet_select2 = "width:46pxdisplay:none"

//日期选择控件体的样式

var s_tiannet_body = "width:150background-color:#2650A6display:nonez-index:9998position:absolute" +

"border-left:1 solid #CCCCCCborder-top:1 solid #CCCCCCborder-right:1 solid #999999border-bottom:1 solid #999999"

//显示日的td的样式

var s_tiannet_day = "width:21pxheight:20pxbackground-color:#D8F0FCfont-size:10pt"

//字体样式

var s_tiannet_font = "color:#FFCC00font-size:9ptcursor:hand"

//链接的样式

var s_tiannet_link = "text-decoration:nonefont-size:9ptcolor:#2650A6"

//横线

var s_tiannet_line = "border-bottom:1 solid #6699CC"

//------------------ 变量定义 ---------------------------//

var tiannetYearSt = 1950//可选择的开始年份

var tiannetYearEnd = 2010//可选择的结束年份

var tiannetDateNow = new Date()

var tiannetYear = tiannetDateNow.getFullYear()//定义年的变量的初始值

var tiannetMonth = tiannetDateNow.getMonth()+1//定义月的变量的初始值

var tiannetDay = tiannetDateNow.getDate()

var tiannetHour = 8//tiannetDateNow.getHours()

var tiannetMinute = 0//tiannetDateNow.getMinutes()

var tiannetArrDay=new Array(42) //定义写日期的数组

var tiannetDateSplit = "-"//日期的分隔符号

var tiannetDateTimeSplit = " " //日期与时间之间的分隔符

var tiannetTimeSplit = ":"//时间的分隔符号

var tiannetOutObject //接收日期时间的对象

var arrTiannetHide = new Array()//被强制隐藏的标签

var m_bolShowHour = false//是否显示小时

var m_bolShowMinute = false//是否显示分钟

var m_aMonHead = new Array(12)//定义阳历中每个月的最大天数

m_aMonHead[0] = 31m_aMonHead[1] = 28m_aMonHead[2] = 31m_aMonHead[3] = 30m_aMonHead[4] = 31m_aMonHead[5] = 30

m_aMonHead[6] = 31m_aMonHead[7] = 31m_aMonHead[8] = 30m_aMonHead[9] = 31m_aMonHead[10] = 30m_aMonHead[11] = 31

// ---------------------- 用户可调用的函数 -----------------------------//

//用户主调函数－只选择日期

function setDay(obj){

tiannetOutObject = obj

//如果标签中有值，则将日期初始化为当前值

var strValue = tiannetTrim(tiannetOutObject.value)

if( strValue != "" ){

tiannetInitDate(strValue)

}

tiannetPopCalendar()

}

//用户主调函数－选择日期和小时

function setDayH(obj){

tiannetOutObject = obj

m_bolShowHour = true

//如果标签中有值，则将日期和小时初始化为当前值

var strValue = tiannetTrim(tiannetOutObject.value)

if( strValue != "" ){

tiannetInitDate(strValue.substring(0,10))

var hour = strValue.substring(11,13)

if( hour <10 ) tiannetHour = hour.substring(1,2)

}

tiannetPopCalendar()

}

//用户主调函数－选择日期和小时及分钟

function setDayHM(obj){

tiannetOutObject = obj

m_bolShowHour = true

m_bolShowMinute = true

//如果标签中有值，则将日期和小时及分钟初始化为当前值

var strValue = tiannetTrim(tiannetOutObject.value)

if( strValue != "" ){

tiannetInitDate(strValue.substring(0,10))

var time = strValue.substring(11,16)

var arr = time.split(tiannetTimeSplit)

tiannetHour = arr[0]

tiannetMinute = arr[1]

if( tiannetHour <10 ) tiannetHour = tiannetHour.substring(1,2)

if( tiannetMinute <10 ) tiannetMinute = tiannetMinute.substring(1,2)

}

tiannetPopCalendar()

}

//设置开始日期和结束日期

function setYearPeriod(intDateBeg,intDateEnd){

tiannetYearSt = intDateBeg

tiannetYearEnd = intDateEnd

}

//设置日期分隔符。默认为"-"

function setDateSplit(strDateSplit){

tiannetDateSplit = strDateSplit

}

//设置日期与时间之间的分隔符。默认为" "

function setDateTimeSplit(strDateTimeSplit){

tiannetDateTimeSplit = strDateTimeSplit

}

//设置时间分隔符。默认为":"

function setTimeSplit(strTimeSplit){

tiannetTimeSplit = strTimeSplit

}

//设置分隔符

function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){

tiannetDateSplit(strDateSplit)

tiannetDateTimeSplit(strDateTimeSplit)

tiannetTimeSplit(strTimeSplit)

}

//设置默认的日期。格式为：YYYY-MM-DD

function setDefaultDate(strDate){

tiannetYear = strDate.substring(0,4)

tiannetMonth = strDate.substring(5,7)

tiannetDay = strDate.substring(8,10)

}

//设置默认的时间。格式为：HH24:MI

由于省市数据是固定的，通常，我会独立定义一个js文件，里面是一个json数据，分级存储省市数据，每个地区都有一个六位的代码，就是你身份证的前六位，那是精确到县级的~

当然，如果你只需要到地级市，那就弄两级的就行啦

js读取js，是很快的~

首先在head中载入jquery库和cityselect插件。

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。

<div id="city">

<select class="prov"></select>

<select class="city" disabled="disabled"></select>

<select class="dist" disabled="disabled"></select>

</div>

jQuery

调用cityselect插件非常简单，直接调用：

$("#city").citySelect()

自定义参数调用，设置默认省市区。自定义参数调用，设置默认省市区。

$("#city").citySelect({

url:"js/city.min.js",

prov:"湖南", //省份

city:"长沙", //城市

dist:"岳麓区", //区县

nodata:"none" //当子集无数据时，隐藏select

})

当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。

$("#city").citySelect({

url:{"citylist":[

{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},

{"n":"JAVASCIPT"}]},

{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},

{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

})

你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。

$("#city").citySelect({

url:"data.php"

})