最新jeesite4实现字典数据多级下拉框联动

(一)在字典中添加字典数据
最新jeesite4实现字典数据多级下拉框联动_第1张图片
添加类似这样的二级字典,其中二级字典的编号尽量不要改动,让系统自动根据父级字典自动生成。
(二)修改下拉选项框

<div class="form-group">
					<label class="control-label">${text('所属部门')}</label>
					<div class="control-inline width-120">
						<#form:select path="aac010" dictType="aac010" onchange="categoryChg()" class="form-control required" blankOption="true"/>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label">${text('职务名称')}</label>
					<div class="control-inline width-120">
						<#form:select path="aac014" dictType="aac010" blankOption="true" class="form-control required"/>
					</div>
				</div>

(三)添加jquer页面加载代码

<script>
	var purchaseTypeJson;
	$(function () {
		$.ajax({
			type:"POST",
			url:"${ctx}/sys/dictData/treeData?dictType=aac010",
			dataType:"json",
			success: function(json){
				purchaseTypeJson = json;
				var category = $('#aac010 option:selected').val();
				var categorySelect = $("#aac010")[0];
				categorySelect.options.length=1;

				var type = $('#aac014 option:selected').val();
				var typeSelect = $("#aac014")[0];
				typeSelect.options.length=1;
				//往父级下拉框中追加父级字典
				for (var i of json) {
					if (i.pId == "0") {
						categorySelect.options.add(new Option(i.name, i.value, false, i.value == category));
					}
				}
			}
		});
	});

	function categoryChg() {

		var category = $('#aac010 option:selected').val(); //父级下拉框选中的值

		var typeSelect = $("#aac014")[0];  //清空原来下拉框的值
		typeSelect.options.length = 1;

		//进行循环判断并追加数据到二级下拉框中
		for (var i of purchaseTypeJson) {
			if (i.value.length == 5 && i.value.substr(0, 2) == category) {
				typeSelect.options.add(new Option(i.name, i.value));  //往下拉框中追加值
			}
		}
	}

</script>

(四)展示页面效果
最新jeesite4实现字典数据多级下拉框联动_第2张图片

你可能感兴趣的:(java学习心得,java,jquery)