二級聯動(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();    }

 

二級聯動(jquery-ajax-json-springmvc)