二级联动(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();
    }

 

posted @ 2015-08-19 10:00  QinH  阅读(513)  评论(0编辑  收藏  举报