<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="POST">
<select name="province" class="province"></select>
<select name="city" class="city"></select>
</form>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="city.js"></script>
<script>
;(function ($) {
$.fn.selectCity = function (options)
{
var defaults = {
province : '' , //省份对象
city : '' , //城市对象
callback : function(cityArr){}
}
options = $.extend(defaults , options);
this.each(function(){
//默认省份及城市
var cityIndexArr = ['0','0'] ,
pSelectHtml = '' ,
cSelectHtml = '' ,
$province = $(options.province) ,
$city = $(options.city) ;
//省份
for( var i = 0 , len = provinceArr.length ; i < len ; i++ )
{
pSelectHtml += '<option value="'+i+'">'+provinceArr[i]+'</option>';
}
$province.html( pSelectHtml );
//获取城市数据
var _getCity = function( index )
{
var sCityArr = cityArr[index];
cSelectHtml = '';
for( var i = 0 , len = sCityArr.length ; i < len ; i++ )
{
cSelectHtml += '<option value="'+i+'">'+sCityArr[i]+'</option>';
}
$city.html( cSelectHtml );
}
//初始值
_getCity(cityIndexArr[0]);
//省份根据事件执行函数处理
$province.on('change',function(){
var _thisVal = $(this).val() ;
cityIndexArr[0] = _thisVal ; //填写入索引值数组方便根据索引值获取
cityIndexArr[1] = '0';//清除之前残留的数据
_getCity( _thisVal );
options.callback( cityIndexArr ) ;
});
//城市根据事件执行函数处理
$city.on('change',function(){
var _thisVal = $(this).val();
cityIndexArr[1] = _thisVal ;
options.callback( cityIndexArr ) ;
});
//回调函数
});
return this;
}
})(jQuery);
//调用
$(window).selectCity({
province : '.province' ,
city : '.city' ,
callback : function( indexArr )
{
//输出查看数据
console.log(indexArr,provinceArr[indexArr[0]],cityArr[indexArr[0]][indexArr[1]]);
}
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="POST">
<select name="province" class="province"></select>
<select name="city" class="city"></select>
</form>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="city.js"></script>
<script>
;(function ($) {
$.fn.selectCity = function (options)
{
var defaults = {
province : '' , //省份对象
city : '' , //城市对象
callback : function(cityArr){}
}
options = $.extend(defaults , options);
this.each(function(){
//默认省份及城市
var cityIndexArr = ['0','0'] ,
pSelectHtml = '' ,
cSelectHtml = '' ,
$province = $(options.province) ,
$city = $(options.city) ;
//省份
for( var i = 0 , len = provinceArr.length ; i < len ; i++ )
{
pSelectHtml += '<option value="'+i+'">'+provinceArr[i]+'</option>';
}
$province.html( pSelectHtml );
//获取城市数据
var _getCity = function( index )
{
var sCityArr = cityArr[index];
cSelectHtml = '';
for( var i = 0 , len = sCityArr.length ; i < len ; i++ )
{
cSelectHtml += '<option value="'+i+'">'+sCityArr[i]+'</option>';
}
$city.html( cSelectHtml );
}
//初始值
_getCity(cityIndexArr[0]);
//省份根据事件执行函数处理
$province.on('change',function(){
var _thisVal = $(this).val() ;
cityIndexArr[0] = _thisVal ; //填写入索引值数组方便根据索引值获取
cityIndexArr[1] = '0';//清除之前残留的数据
_getCity( _thisVal );
options.callback( cityIndexArr ) ;
});
//城市根据事件执行函数处理
$city.on('change',function(){
var _thisVal = $(this).val();
cityIndexArr[1] = _thisVal ;
options.callback( cityIndexArr ) ;
});
//回调函数
});
return this;
}
})(jQuery);
//调用
$(window).selectCity({
province : '.province' ,
city : '.city' ,
callback : function( indexArr )
{
//输出查看数据
console.log(indexArr,provinceArr[indexArr[0]],cityArr[indexArr[0]][indexArr[1]]);
}
});
</script>
</body>
</html>
3421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
