jsp实现表格联动

导读：jsp和ajax实现表格联动（例如：点击省份，就会出现相应的市区）

实现效果图：

代码：

html页面：

<h2>请选择产品类型</h2>
<ul class="ul_set1">
<li><label>产品类型：</label> <select class="ipt1" id="catalogname">
<option value="">请选择</option>
</select></li>
<li><label>产品：</label> <select class="ipt1" id="productId">
<option id="product1" value="">请选择</option>
</select></li>
</ul>

js代码：

<script type="text/javascript">
    $(function(){
   $.ajax({
   url: window.BIZCTX_PATH + '/manual/getProductType.ajax',
   type: "POST",
   dataType: "json",
   success: function(data){    
   for (var i = 0; i < data.list.length; i++) {
   $("#catalogname").append('<option value="'+ data.list[i].catalogID +'">'+data.list[i].catalogName+'</option>');
   }
   }
   })
    })

    $("#catalogname").change(function(){
var catalogId = $(this).val();
if(!catalogId) {
$("#navtable").empty();
$("#navtable").siblings().remove();
$("#product1").siblings().remove();
} else {
$("#navtable").empty();
$("#navtable").siblings().remove();
$("#product1").siblings().remove();
$.ajax({
   url: window.BIZCTX_PATH +'/manual/getAllStageByCatalogId.ajax',
   type: "POST",    
   dataType: "json",
   data:{
    catalogid:catalogId
              },
   success: function(data){
    var cata2 = catalogId;
    $.ajax({
    url: BIZCTX_PATH + '/manual/getAllProductByCatalogId.ajax',
    type: "POST",    
    dataType: "json",
    data:{
       catalogid:cata2
             },
    success: function(data){    
       for (var j = 0; j < data.list.length; j++) {
           $("#productId").append('<option value="'+ data.list[j].productid +'">'+data.list[j].name+'</option>');
       }        
     }    
    });    
   getStages(data.stagelist, data.star);
   }
   })
}
})

   $("#productId").change(function(){
$(".product").val($('#productId').val());
$(".catalog").val($('#catalogname').val());
});

</script>