Ajax实现下拉框联动效果,动态拼接下拉框选项,实现从数据库中加载数据
<div class="form-group"> <label>车系品牌:</label> <form:select id="brand" path="brand" class="form-control input-sm"> <form:option value="" label="请选择"/> <form:options items="${brandList}" htmlEscape="false"/></form:select> <label>车系名称:</label> <form:select id="seriesName" path="seriesName" class="form-control input-sm"> <form:option value="" label="请选择"/> </form:select> </div>
<script type="text/javascript">$(document).ready(function() {if($("#brand").val()!=null && $("#brand").val()!=""){selectC();}$("#brand").change(function(){selectC();}); function selectC(){var name = $("#seriesName"); var brand=$("#brand").val();$.ajax({ url: "${ctx}/product/carSeries/search?brand="+brand,type:"post",dataType:"json",success: function(data){ var optionstring = ""; for (var i in data) { var jsonObj =data[i]; optionstring += "<option value=\"" + jsonObj + "\">" + jsonObj + "</option>"; } $("#seriesName").html("<option value='' >请选择</option>"+ optionstring); },}); } });</script>