region - 地区选择控件

缓存里已经把中国的省份,城市,地区的数据缓存在cache里,可以直接应用_$$RegionCacheZH,把相关的数据取出来

如:

地区选择控件

Allocate

地区选择控件 {lib}util/data/region/zh.js 结构:

<html>
    <body>
        <div class="imgcase">
            地区选择:<select id="province" class="slt"></select> <select id="city" class="slt"></select> <select id="area" class="slt"></select>
        </div>
    </body>
</html>

添加图片轮换控件依赖文件如下

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _v = _('nej.v'),
        _tu = _('t.u'),
        _p = _('nej.ut');

     var _province = _e._$get('province');  //省份节点 
     var _city = _e._$get('city');          //城市节点
     var _area = _e._$get('area');          //地区节点
     _v._$addEvent(_province,'change',onProvinceChange._$bind(this));   //给省份节点添加省份改变时的事件
     _v._$addEvent(_city,'change',onCityChange._$bind(this));           //给城市节点添加城市改变时的节点
     var _cache = _p._$$RegionCacheZH ._$allocate({onlistload:onListLoad})
     _cache._$getList({key:'province'});
     function onListLoad(_option){
         var _key = _option.key.split('-')[0];
         switch(_key){
             case 'province':
                 processSelect(_province,_cache._$getListInCache(_option.key));
                 onProvinceChange();
                 break;
             case 'city':
                 processSelect(_city,_cache._$getListInCache(_option.key));
                 onCityChange();
                 break;
             case 'area':
                 processSelect(_area,_cache._$getListInCache(_option.key));
                 break;
         }
     }
     //省份改变时的事件事件响应
     function onProvinceChange(){
         var _pro = _province.options[_province.selectedIndex];
         _cache._$getList({key:'city-'+_pro.text});
     };
     //城市改变时的事件事件响应
     function onCityChange(){
         var _pro = _province.options[_province.selectedIndex];
         var _cty = _city.options[_city.selectedIndex];
         _cache._$getList({key:'area-'+_pro.text+'-'+_cty.text});
     };
     //重置select节点
     function processSelect(_selectNode,_list){
         _selectNode.options.length = 0;  
         for(var i=0,l=_list.length;i<l;i++){
             var _options = new Option(_list[i], _list[i]);
             _selectNode.options.add(_options); 
         }
     }
}
define(['{lib}util/data/region/zh.js', '{pro}js/extend.js'],f);

Explain

参数

cache._$getList({key:'province'}); 获取省份列表

cache._$getList({key:'city-浙江省'}); 获取城市列表

cache._$getList({key:'area-浙江省-杭州市'}); 获取地区列表

更多的参数信息请参照zh.js api说明

Recycle

缓存不需要做回收处理

Known Issues

Demo

地区选择控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus