AngularJS Or jQuery省都市二級連動ドロップダウン機能
41407 ワード
開発中に連動メニューを使うことがありますが、ここではそれぞれ2つの方法の連動を書いて、後で使うときに直接呼び出したり参考にしたりするのに便利です.
まず共通のjsファイルを書いて、省と都市を保存して、もちろん開発の中で直接jsに書き込むことができます.
city.jsという主な保存省と都市データ(共通)
angularJs書き方:
jQueryプラグインの書き方:
まず共通のjsファイルを書いて、省と都市を保存して、もちろん開発の中で直接jsに書き込むことができます.
city.jsという主な保存省と都市データ(共通)
//
var provinceArr = [" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "];
//
var cityArr = [
[' '],
[' ', ' ',' ',' ',' ',' ',' ', ' ',' ', ' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ', ' ',' ',' ',' ',' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' '],
[' ',' ',' ',' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ', ' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',' ',' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ',' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' '],
[' ' ,' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ', ' ', ' ', ' ', ' ', ' ' ],
[' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ',' ',' ',' ',' '],
[' ',' ',' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' ],
[' ']
];
angularJs書き方:
<!DOCTYPE html>
<html lang="en" ng-app="cityApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="CityCtrl as cBox">
<form action="" method="POST">
<select name="province" class="province" ng-init="province.id='0'" ng-model="province.id" ng-change="cBox.provinceChange(province.id);city.id='0';" ng-options="id as name for (id,name) in cBox.provinceArr"></select>
<select name="city" class="city" ng-init="city.id='0'" ng-model="city.id" ng-change="cBox.cityChange(city.id);" ng-options="id as name for (id,name) in cBox.getCityArr"></select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="city.js"></script>
<script>
var cityApp = angular.module('cityApp', []);
cityApp.controller('CityCtrl', ['$scope', function($scope){
var cBox = this ;
cBox.provinceArr = provinceArr ; //
cBox.cityArr = cityArr; //
cBox.getCityArr = cBox.cityArr[0]; //
cBox.getCityIndexArr = ['0','0'] ; // ，
// [ ]
cBox.provinceChange = function(index)
{
cBox.getCityArr = cBox.cityArr[index] ; //
cBox.getCityIndexArr[1] = '0' ; //
cBox.getCityIndexArr[0] = index ;
//
console.log(cBox.getCityIndexArr,provinceArr[cBox.getCityIndexArr[0]],cityArr[cBox.getCityIndexArr[0]][cBox.getCityIndexArr[1]]);
}
//
cBox.cityChange = function(index)
{
cBox.getCityIndexArr[1] = index ;
//
console.log(cBox.getCityIndexArr,provinceArr[cBox.getCityIndexArr[0]],cityArr[cBox.getCityIndexArr[0]][cBox.getCityIndexArr[1]]);
}
}]);
</script>
</body>
</html>jQueryプラグインの書き方:
<!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>