三級聯動

本次採用ssm框架做頁面上的三級聯動

代碼如下:

JavaScript代碼:

<script type="text/javascript">
     $(function(){    
         $("#typeb").empty();   //再次選中是清空
         $("#typec").empty();
         $.post(
            "thresslevel",
            {tid:1},
            function(obj){
                //alert(obj);
                for(var i in obj){
                    $("#typea").append("<option value='"+obj[i].id+"'>"+obj[i].tname+"</option>");
                }
            },"json"
         );  //
        
         $("#typea").change(function(){
             var typeaid = $(this).val();
             $("#typeb")[0].length=1;     //確保默認的option不被清空
               $("#typec")[0].length=1;
            alert(typeaid);
            $("#typec").empty();
            $.post(
            "thresslevel",
            {tid:typeaid},
            function(obj){
                //alert(obj);
                for(var i in obj){
                    $("#typeb").append("<option value='"+obj[i].id+"'>"+obj[i].tname+"</option>");
                }
            },"json"
         );  
         });  //
        
         $("#typeb").change(function(){
             var typebid=$(this).val();
             $("#typec")[0].length=1;
             alert(typebid);
             $.post(
                        "thresslevel",
                        {tid:typebid},
                        function(obj){
                            //alert(obj);
                            for(var i in obj){
                                $("#typec").append("<option value='"+obj[i].id+"'>"+obj[i].tname+"</option>");
                            }
                        },"json"
                     );
         });
        
     });
</script>

jsp代碼:

<form method="post">
       <table width="300px" >
          <tr>
            <td>商品名稱:<input type="text" name="name"></td>
          </tr>
          <tr>
            <td>商品價格:<input type="text" name="price"></td>
          </tr>
          <tr>
            <td>商品描述:<input type="text" name="content"></td>
          </tr>
          <tr>
            <td>商品類型:
            <select id="typea">
                 <option value='-1'>請選擇</option>           
            </select>
            </td>
            <td>
            <select id="typeb">
                <option value='-1'>請選擇</option>                
            </select>
            </td>
            <td>
            <select id="typec" name="tid">
                <option value='-1'>請選擇</option>                
            </select>
            </td>
          </tr>
          <tr>
            <td><input type="submit" value="新增"></td>
          </tr>
       </table>
   </form>

至於後臺代碼那就是一條sql語句的事