jQuery组件 - cxselect 下拉选联动

引擎:thymeleaf

导包：

<th:block th:include="include :: jquery-cxselect-js"/>

页面元素：

<div id="areaDiv" class="row">
	<div class="col-sm-2">
		<select name="province" class="province form-control m-b" data-first-title="选择省">
			<option value="">请选择</option>
        </select>
    </div>
    <div class="col-sm-2">
        <select name="city" class="city form-control m-b" data-first-title="选择市">
            <option value="">请选择</option>
        </select>
    </div>
    <div class="col-sm-2">
        <select name='area' class="area form-control m-b" data-first-title="选择地区">
            <option value="">请选择</option>
        </select>
    </div>
</div>

拉取数据：

	/** 获取区域信息，联动 */ 
    var areaUrl = ctx + 'bigscreen/area/listObject';
    // 配置 cxSelect 基本属性
    $.cxSelect.defaults.url = areaUrl;
    $.cxSelect.defaults.jsonName = 'name';
    $.cxSelect.defaults.jsonValue = 'id';
    $.cxSelect.defaults.jsonSub = 'subArea';
    // 拉取数据并填充
    $('#areaDiv').cxSelect({
        selects: ['province', 'city', 'area'],
        nodata: 'none'
    });

表单验证：

$("#subBut").click(function(){
	if (!$("#cnMap .province").val() && !$("#cnMap .province").attr('disabled'))
	{
		alert('请选择省份 :)');
		$("#cnMap .province").focus();
		return false;
	} else if (!$("#cnMap .city").val() && !$("#cnMap .city").attr('disabled')) {
		alert('请选择市 :)');
		$("#cnMap .city").focus();
		return false;
	} else if (!$("#cnMap .region").val() && !$("#cnMap .region").attr('disabled')) {
		alert('请选择县区 :)');
		$("#cnMap .region").focus();
		return false;
	} else {
		return true;
	}
});

数据结构：

public class Area extends BaseEntity {
    private static final long serialVersionUID = 1L;
    private Long id;
    private String name;
    private Long parentId;
    private Integer level;
    /*** 子集地区 */
    private List<Area> subArea;
}