二级联动(jquery-ajax-json-springmvc)

　 

html代码

<select id="firstDepartment" onchange="onChange()">
　　<option value="0">1</option>
　　<option value="1">1</option>
　　<option value="2">2</option>
</select>
<select id="secondDepartment"/>

 

 

 

js代码

//firstLevelName  一级下拉框
//secondLevelName 二级下拉框      

function onChange(){
            var firstLevelName = $('#firstDepartment').val();

            $.ajax({
                        url: 'getSecondLevelNames',
                        type: 'get',
                        contentType: "application/json; charset=utf-8",
                        data:{firstLevelName: firstLevelName},
                        dataType: 'json',
                        success: function(data){

                            var names = data.secondLevelNames;

                            $('#secondDepartment').empty();
                            for(var i in names){
                                $("<option value = '" + decodeURI(names[i]) + "' >" + decodeURI(names[i]) + "</option>").appendTo($('#secondDepartment'));
                            }
                        }
                    }
            );
        }

 

后台代码

    @RequestMapping(value = "/getSecondLevelNames", method = RequestMethod.GET)
    public @ResponseBody String getSecondLevelNames(@RequestParam(value = "firstLevelName") String firstLevelName){

        List<String> secondLevelName = LevelUtil.getSecondLevelNames(firstLevelName);
        JSONObject json = new JSONObject();
        json.put("secondLevelNames", secondLevelName);

        return json.toString();
    }