话不多说 首先上图片
JSP 页面代码 截图
第一个下拉框JSP代码
<div class="control-group">
<label class="control-label">离职类型:</label>
<div class="controls">
<form:select id="type" name="type" path="type" class="input-xlarge" onchange="findtemplate(this.options[this.options.selectedIndex].value);"
style="width:180px;">
<%-- <form:option value="" label="" /> --%>
<form:options items="${fns:getDictList('upl_type')}"
itemLabel="label" itemValue="value" htmlEscape="false" />
</form:select>
</div>
</div>
第二个下拉框JSP代码
<div class="control-group">
<label class="control-label">选择模板:</label>
<div class="controls">
<form:select id="template" name="template" path="type" class="input-xlarge"
style="width:180px;">
<%-- <form:option value="" label="" /> --%>
<form:options id="wordTemplate" items="${fns:getDictList('upc_word')}"
itemLabel="label" itemValue="value" htmlEscape="false" />
</form:select>
<%-- <a href="${ctx}/sys/userdetail/upcform">导出模板</a> --%>
</div>
</div>
精髓部分为 第一个下拉框
onchange="findtemplate(this.options[this.options.selectedIndex].value);"
说明:findtemplate()为函数名称
this.options[this.options.selectedIndex].value 这句话能获取到第一个下拉框选择的值
JS代码部分:
function findtemplate(v) {
$.ajax({
type : "post",
async : false,
url : "getPostTemplateJson",
data : {
'type' : v
},
dataType : "json",
success : function(msg) {
$("#template").empty();
//$("#template").select2();
if (msg.length > 0) {
for (var i = 0; i < msg.length; i++) {
var partId = msg[i].value;
var partName = msg[i].label;
var $option = $("<option>").attr({
"value" : partId
}).text(partName);
$("#template").append($option);
}
//$("#template option:first").prop("selected", 'selected');
$("#template").change();
}
},
error : function(json) {
$.jBox.alert("网络异常!");
}
});
}
JS代码说明:
通过AJAX请求 后台数据 然后采取循环拼接的办法 构造下拉框的。 option。。
必要说明:$(“#下拉框”).empty(),为 jquey写法,必写。
$(“#下拉框”).change(); 这个change()函数 一定要写,否则有一个小bug。
这个bug是什么就不明说了,复制代码的兄弟 可以去掉试试效果。
这是个很细节的操作哦 。。。。。。。。。。。。。。