Ajax动态拼接下拉框实现联动效果

最新推荐文章于 2022-03-12 08:00:00 发布

LonelyMrFan

最新推荐文章于 2022-03-12 08:00:00 发布

阅读量1.2k

点赞数 1

分类专栏：下拉框联动文章标签：联动 Ajax

本文链接：https://blog.csdn.net/LonelyMrFan/article/details/73770128

版权

下拉框联动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>