(一)在字典中添加字典数据
添加类似这样的二级字典,其中二级字典的编号尽量不要改动,让系统自动根据父级字典自动生成。
(二)修改下拉选项框
<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>
(四)展示页面效果