YII 地区多级联动选择器组件

系统中的地区列表功能重新做了,并定制了许多地方都需要使用的地区列表的多级联动的组件,使用方法如下:

1.在页面中定义一个容纳组件的容器,例如:div、span等等。

2.在页面中引入:

{script src='@static/js/jquery.region.js'}

 3.在页面加载完成后初始化组件:

$("#region_container").regionselector({
			// 组件初始化时,如果value属性传入地区代码,则组件自动加载对应的地区,为空或者null均不加载
			value: '37,14,22',
			// 根据页面样式可以给每个select下拉框定义class
			select_class: "form-control",
			// @param value 用户选择的值,可以根据用户选择的值赋值给某个隐藏域货做其他处理
			// @param names 用户选择的所有地区名称的列表,如果用户选择的为空则返回空数组
			// @param is_last 用于判断选择的是否已经是最后一级了,如果是则返回true,否则返回false
			change: function(value, names, is_last) {
				console.info(value);
			}
		});

4.注意:

(1)change事件的is_last可判断是否为最后一级,可用于处理只有在最后一级时才将value赋值给隐藏域,通过隐藏域加入验证规则达到验证的目的。

(2)change事件的names为一个数组,表示所选择的地区的列表的名称数组,最后一项元素对应value的地区名称。

5.效果:

这是页面初始化时就给定的地区值,ajax直接加载出默认值
YII 地区多级联动选择器组件
 

yii

相关推荐