jquery实现二级联动，实时查询数据库

一、jsp页面:

<tr>
<th><span class="red">* </span><font size="2">服务类型：</font></th>
<td>
<select id="addServiceType" name="serviceType" style="width: 168px;" onchange="serviceTypeChange(this.options[this.selectedIndex].value);">
<option value="">--选择服务方式--</option>
<option value="1">配送中心</option>
<option value="2">门店</option>
</select>
</td>
<th><span class="red">* </span><font size="2">所属分类：</font></th>
<td colspan="3">
<select id="addProductTypeId" name="productTypeId" style="width: 168px;">
</select>
</td>
</tr>

二、js代码：

function serviceTypeChange(value){
$("#addProductTypeId").empty();
 $.ajax({ 
   type : "post",
    url : "${ctx}/productType/getPTByST?serviceType="+value,
    contentType:"application/json;charset=UTF-8",
    dataType:"json",
    success : function(data) {
      $.each(data, function (i, item) { 
      $("#addProductTypeId").append("<option value="+ item.id+">"+ item.typeName+"</option>");
     });
   }
 });
}

三、controller代码：

@RequestMapping(value="/getPTByST",method=RequestMethod.POST)
@ResponseBody
private List<ProductType> getPTByST(Integer serviceType) {
return productTypeService.getProductType(serviceType);
}