JS省市街地連動
39558 ワード
JS省市街地使用文書
一:サーバーはJSONフォーマットを返して以下のURLの中でdataのフォーマットを要求します:(KISSYコンポーネントdataフォーマットを持ってきました)
http://gallery.kissyui.com/cityselector/doc/linkage-data.js
二:使用する場合、ページhead部分はjqueryと省市区JSを導入する必要があり、HTML構造に依存するのは以下の通りである.
属性の説明:
id:ドロップダウンボックスdomノード(ページ上では一意)、js初期化用のフック.
Data-code:ページを初期化する際に、省市街地のコードに基づいてその省、市、区を指定して表示することができます.例えば、「吉林省長春市朝陽区」ページのデフォルト表示を指定したい場合は、HTML構造に対応するdata-code符号化を加えて指定できます.例えば、以下のようにします.
ページが開くと次のように表示されます.
三:省市区JSの初期化方法は以下の通りである.
var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});
プロパティの説明は次のとおりです.
data:data構成項目とは、バックグラウンドで返されるjsonデータの保存されたグローバル変数を指す.
provIdとは、省ドロップダウンボックスselectのidを指す.
cityIdとは、都市ドロップダウンボックスselectのidを指す.
areaIdは、ドロップダウンボックスselectのidを指します.
省市区id伝参方式:いずれもXXXである.
省市区の基本的な配置項目は以下の通りである.
data:バックグラウンドから返されるJSONデータのこと.
provId:省ドロップダウンselectのid.
cityId:都市ドロップダウンボックスselectのidを指します.
areaId:ドロップダウンボックスselectのidを指します.
isSelect:デフォルトではtrueで1番目の項目を選択します.ページに省・市街地の項目が指定されている場合、指定された項目が表示されます.falseの場合は、「選択してください」を選択します.
ProvCallBack:省ドロップダウンボックスのレンダリングが完了したコールバック関数.
cityCallBack:市ドロップダウンボックスのレンダリングが完了したコールバック関数.
areaCallBack:領域ドロップダウンボックスのレンダリングが完了したコールバック関数.
デモ:
一:デフォルトのHTML構造は以下の通りです.
JSコードの初期化方法は以下の通りである.
var selectVal = new CitySelect({ data : data, provId : "#prov4", cityId : '#city4', areaId : '#area4' });
ページを開くと、次のように表示されます.
1. ページが開くとデフォルトで最初の北京が表示され、省市街地によって他の省を切り替えることもできます.上のgif図が見えると、下のselectの属性data-codeも変化します.省がドロップダウンボックスを選択してくださいと切り替えると、省市街地のdata-codeは-1になり、市、区は選択できません.ドロップダウン・ボックスのみを選択してください.
2. 省がある場合、市を「選択してください」に切り替えると、区も対応する市と区selectのdata-code値を-1に変更します.ここでdata-codeはformフォームのコミットに必要です.つまり、○○省の下のすべての市とすべての区です.
3. 同時に省、市がある場合、私の区もchangeすることができて、それでは他の区を選ぶ時data-codeも同時に変化して、選択してくださいに切り替える時valueは-1で、つまりある省の○○市の下のすべての区です.
2つ目は、ページが初期化されると、ある省の○○市の○○区を指定したいときに、次の図のようにHTML構造をどのように書くかということです.
selectボックスにdata-codeプロパティを追加して、次のように指定できます.
注意:もし私が省を指定したら:浙江省、市:浙江省の中の市ではありません.では、選ばれた市は浙江省のデフォルトの最初の市で、同理区も同じです.
三:第三の初期化は、コンフィギュレーション項目isSelectによってコンフィギュレーションされ、デフォルトではこのコンフィギュレーション項目がtrueであり、省市街地が指定されていない場合はデフォルトで第一項を選択し、指定された省市街地があれば、指定された省市街地を表示する.isSelectプロファイルがfalseの場合、デフォルトではドロップダウン・ボックスを選択します.コードを見て次のように判断できます!
gif図に表示されているものも見ることができます.
上記gif図に示すように、デフォルトでは「選択してください」ドロップダウンボックス、data-codeはすべて-1であり、ある省を選択するとdata-code値が変化しますが、対応する「市」と「区」はドロップダウンボックスを選択し、同じ市を選択するとselectの属性data-codeも変化しますが、区ドロップダウンボックスは「選択してください」ドロップダウンボックスです.選択領域のいずれかを選択するとdata-codeも相応に変化する.
JS初期化方式は以下の通りで、1つの構成項目isSelect:falseを追加するだけでよい.
var selectVa2 = new CitySelect({ data : data, provId : "#prov5", cityId : '#city5', areaId : '#area5', isSelect: false });
以下にすべてのHTMLコードを示します.
View Code
JAvascriptコードは次のとおりです.
View Code
JS省市区demoダウンロード
一:サーバーはJSONフォーマットを返して以下のURLの中でdataのフォーマットを要求します:(KISSYコンポーネントdataフォーマットを持ってきました)
http://gallery.kissyui.com/cityselector/doc/linkage-data.js
二:使用する場合、ページhead部分はjqueryと省市区JSを導入する必要があり、HTML構造に依存するのは以下の通りである.
属性の説明:
id:ドロップダウンボックスdomノード(ページ上では一意)、js初期化用のフック.
Data-code:ページを初期化する際に、省市街地のコードに基づいてその省、市、区を指定して表示することができます.例えば、「吉林省長春市朝陽区」ページのデフォルト表示を指定したい場合は、HTML構造に対応するdata-code符号化を加えて指定できます.例えば、以下のようにします.
ページが開くと次のように表示されます.
三:省市区JSの初期化方法は以下の通りである.
var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});
プロパティの説明は次のとおりです.
data:data構成項目とは、バックグラウンドで返されるjsonデータの保存されたグローバル変数を指す.
provIdとは、省ドロップダウンボックスselectのidを指す.
cityIdとは、都市ドロップダウンボックスselectのidを指す.
areaIdは、ドロップダウンボックスselectのidを指します.
省市区id伝参方式:いずれもXXXである.
省市区の基本的な配置項目は以下の通りである.
data:バックグラウンドから返されるJSONデータのこと.
provId:省ドロップダウンselectのid.
cityId:都市ドロップダウンボックスselectのidを指します.
areaId:ドロップダウンボックスselectのidを指します.
isSelect:デフォルトではtrueで1番目の項目を選択します.ページに省・市街地の項目が指定されている場合、指定された項目が表示されます.falseの場合は、「選択してください」を選択します.
ProvCallBack:省ドロップダウンボックスのレンダリングが完了したコールバック関数.
cityCallBack:市ドロップダウンボックスのレンダリングが完了したコールバック関数.
areaCallBack:領域ドロップダウンボックスのレンダリングが完了したコールバック関数.
デモ:
一:デフォルトのHTML構造は以下の通りです.
JSコードの初期化方法は以下の通りである.
var selectVal = new CitySelect({ data : data, provId : "#prov4", cityId : '#city4', areaId : '#area4' });
ページを開くと、次のように表示されます.
1. ページが開くとデフォルトで最初の北京が表示され、省市街地によって他の省を切り替えることもできます.上のgif図が見えると、下のselectの属性data-codeも変化します.省がドロップダウンボックスを選択してくださいと切り替えると、省市街地のdata-codeは-1になり、市、区は選択できません.ドロップダウン・ボックスのみを選択してください.
2. 省がある場合、市を「選択してください」に切り替えると、区も対応する市と区selectのdata-code値を-1に変更します.ここでdata-codeはformフォームのコミットに必要です.つまり、○○省の下のすべての市とすべての区です.
3. 同時に省、市がある場合、私の区もchangeすることができて、それでは他の区を選ぶ時data-codeも同時に変化して、選択してくださいに切り替える時valueは-1で、つまりある省の○○市の下のすべての区です.
2つ目は、ページが初期化されると、ある省の○○市の○○区を指定したいときに、次の図のようにHTML構造をどのように書くかということです.
selectボックスにdata-codeプロパティを追加して、次のように指定できます.
注意:もし私が省を指定したら:浙江省、市:浙江省の中の市ではありません.では、選ばれた市は浙江省のデフォルトの最初の市で、同理区も同じです.
三:第三の初期化は、コンフィギュレーション項目isSelectによってコンフィギュレーションされ、デフォルトではこのコンフィギュレーション項目がtrueであり、省市街地が指定されていない場合はデフォルトで第一項を選択し、指定された省市街地があれば、指定された省市街地を表示する.isSelectプロファイルがfalseの場合、デフォルトではドロップダウン・ボックスを選択します.コードを見て次のように判断できます!
gif図に表示されているものも見ることができます.
上記gif図に示すように、デフォルトでは「選択してください」ドロップダウンボックス、data-codeはすべて-1であり、ある省を選択するとdata-code値が変化しますが、対応する「市」と「区」はドロップダウンボックスを選択し、同じ市を選択するとselectの属性data-codeも変化しますが、区ドロップダウンボックスは「選択してください」ドロップダウンボックスです.選択領域のいずれかを選択するとdata-codeも相応に変化する.
JS初期化方式は以下の通りで、1つの構成項目isSelect:falseを追加するだけでよい.
var selectVa2 = new CitySelect({ data : data, provId : "#prov5", cityId : '#city5', areaId : '#area5', isSelect: false });
以下にすべてのHTMLコードを示します.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script src="js/city2.js"></script>
<script type="text/javascript" src="js/citySelect2.js"></script>
<title>Document</title>
</head>
<body>
<div id="city_4">
<select class="prov" id="prov4" data-code ="220000"></select>
<select class="city" id="city4" data-code ="220100"></select>
<select class="dist" id="area4" data-code ="220104"></select>
</div>
<div id="city_5">
<select class="prov" id="prov5">
</select>
<select class="city" id="city5"></select>
<select class="dist" id="area5"></select>
</div>
<script>
var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});
var selectVa2 = new CitySelect({
data : data,
provId : "#prov5",
cityId : '#city5',
areaId : '#area5',
isSelect: false
});
</script>
</body>
</html>View Code
JAvascriptコードは次のとおりです.
/**
* Jquery
* @version 0.0.2
*/
function CitySelect(options) {
this.config = {
data : '', //
provId : '', // id #XXX
cityId : '', // id #XXX
areaId : '', // id #XXX
isSelect : true, // true ， 。
// false， " "
provCallBack : null, //
cityCallBack : null, //
areaCallBack : null //
};
this.config = $.extend(this.config, options || {});
this.init();
}
CitySelect.prototype = {
constructor: CitySelect,
/*
* init
*/
init: function() {
var self = this,
_config = self.config;
if(!/^#/.test(_config.provId)) {
alert(" ID , #XXX");
return;
}
if(!/^#/.test(_config.cityId)) {
alert(" ID , #XXX");
return;
}
if(!/^#/.test(_config.cityId)) {
alert(" ID , #XXX");
return;
}
this.provCode = $(_config.provId).attr("data-code");
this.cityCode = $(_config.cityId).attr("data-code");
this.areaCode = $(_config.areaId).attr("data-code");
// id (#XX --> XX)
this.provid = _config.provId.replace(/^#/g,'');
this.cityid = _config.cityId.replace(/^#/g,'');
this.areaid = _config.areaId.replace(/^#/g,'');
//
self._provFunc();
//
self._cityFunc();
//
self._areaFunc();
// -1 select -1
var provFirstOpt = $(_config.provId).val();
if(provFirstOpt == -1) {
$(_config.provId).attr("data-code","-1");
$(_config.cityId).attr("data-code","-1");
$(_config.areaId).attr("data-code","-1");
}
// change and
$(_config.provId).change(function(e){
self._cityFunc();
self._areaFunc();
});
// change
$(_config.cityId).change(function(e){
self._areaFunc();
});
// change
$(_config.areaId).change(function(){
$(_config.areaId).attr("data-code",$(this).val());
});
},
/*
*
* @method _provFunc {private}
*/
_provFunc: function(){
var self = this,
_config = self.config;
var elemHtml = '';
elemHtml+= '<option value="-1" data-name=" " selected> </option>';
$(_config.data).each(function(i,curItem){
elemHtml += "<option data-name='"+curItem[1]+"' value='"+curItem[0]+"'>"+curItem[1]+"</option>";
});
$(_config.provId).html(elemHtml);
if(_config.isSelect) {
$($(_config.provId + " option")[1]).attr("selected",'true');
if(this.provCode) {
self._setSelectCode(_config.provId,this.provCode);
}
}
_config.provCallBack && $.isFunction(_config.provCallBack) && _config.provCallBack();
},
/*
*
* @method _cityFunc {private}
*/
_cityFunc: function(){
var self = this,
_config = self.config;
var provIndex = $(_config.provId).get(0).selectedIndex, // index
elemHtml = '',
prov,
citys,
provOpt;
provOpt = $($(_config.provId + ' option')[0]).attr("value");
var opthtml = '<option value="-1" data-name=" " selected> </option>';
//
if(provOpt == -1) {
provIndex--;
}
$(_config.cityId).empty();
$(_config.areaId).empty();
/*
* " " value -1
* option
*/
if(provIndex < 0){
$(_config.provId).attr("data-code",'-1');
$(_config.cityId).attr("data-code",'-1');
$(_config.areaId).attr("data-code",'-1');
$(_config.cityId).html(opthtml);
$(_config.areaId).html(opthtml);
return;
}
prov = _config.data[provIndex];
citys = prov[2];
elemHtml += '<option value="-1" data-name=" "> </option>';
for(var m = 0; m < citys.length; m++) {
var oneCity = citys[m];
elemHtml += "<option value='"+oneCity[0]+"' data-name='"+oneCity[1]+"'>"+oneCity[1]+"</option>";
}
$(_config.cityId).html(elemHtml);
if(_config.isSelect) {
$($(_config.cityId + " option")[1]).attr("selected",'true');
if(this.cityCode) {
self._setSelectCode(_config.cityId,this.cityCode);
}
}
self._selectChangeCode();
_config.cityCallBack && $.isFunction(_config.cityCallBack) && _config.cityCallBack();
},
/*
*
* @method _areaFunc {private}
*/
_areaFunc: function(){
var self = this,
_config = self.config;
var provOpt = $($(_config.provId + ' option')[0]).attr("value"),
cityOpt = $($(_config.cityId + ' option')[0]).attr("value");
var provIndex = $(_config.provId).get(0).selectedIndex,
cityIndex = $(_config.cityId).get(0).selectedIndex,
elemHtml = "",
prov,
citys,
areas,
oneCity;
var opthtml = '<option value="-1" data-name=" " selected> </option>';
/*
* " " index-1
* " "， " " index - 1
*/
if(provOpt == -1) {
provIndex--;
cityIndex--;
}else if(provOpt != -1 && cityOpt == -1) {
cityIndex--;
}
if(provIndex < 0 || cityIndex < 0){
$(_config.cityId).attr("data-code",'-1');
$(_config.areaId).attr("data-code",'-1');
$(_config.areaId).html(opthtml);
return;
};
prov = _config.data[provIndex];
citys = prov[2];
oneCity = citys[cityIndex];
areas = oneCity[2];
elemHtml += '<option value="-1" data-name=" "> </option>';
if(areas != null) {
for(var n = 0; n < areas.length; n++) {
var oneArea = areas[n];
elemHtml += "<option value='"+oneArea[0]+"' data-name='"+oneArea[1]+"'>"+oneArea[1]+"</option>";
}
}
$(_config.areaId).html(elemHtml);
if(_config.isSelect) {
$($(_config.areaId + " option")[1]).attr("selected",'true');
if(this.areaCode) {
self._setSelectCode(_config.areaId,this.areaCode);
}
}
self._selectChangeCode();
_config.areaCallBack && $.isFunction(_config.areaCallBack) && _config.areaCallBack();
},
/*
* change select data-code
* @method _changeSetCode private
* @param selectId select dom
*/
_changeSetCode: function(selectId){
var self = this,
_config = self.config;
var idx = selectId.selectedIndex, // option
option,
value,
dataValue = $(_config.provId).val();
var html = "<option data-name=' ' value='-1' selected> </option>",
provOpt = $($(_config.provId + ' option')[0]).attr("value");
if(idx > -1) {
if(dataValue == -1) {
if(provOpt != "-1") {
$(_config.provId).prepend(html);
$(_config.cityId).prepend(html);
$(_config.areaId).prepend(html);
}
$(_config.provId).attr("data-code",'');
$(_config.cityId).attr("data-code",'');
$(_config.areaId).attr("data-code",'');
}else {
option = selectId.options[idx]; // option
value = $(option).val();
$(selectId).attr("data-code",value);
}
}
},
_selectChangeCode: function(){
var self = this,
_config = self.config;
// change select data-code
var provId = document.getElementById(this.provid);
self._changeSetCode(provId);
// change select data-code
var cityId = document.getElementById(this.cityid);
self._changeSetCode(cityId);
// change select data-code
var areaId = document.getElementById(this.areaid);
self._changeSetCode(areaId);
},
/*
* select data-code
* @method _setSelectCode {private}
* @param selectId Id
*/
_setSelectCode: function(selectId,code){
var self = this,
_config = self.config;
var optionElems = $(selectId + " option");
$(optionElems).each(function(index,item){
var curCode = $(item).val();
if(curCode == code) {
$(item).attr("selected",'true');
$(selectId).attr("data-code",curCode);
return;
}
});
}
};View Code
JS省市区demoダウンロード