不用JSTL标签获取option下拉列表+下拉列表回显

一、获取并显示

HTML页面：

<label>文章类型:
                    <select id="province" name="id" class="cid-select">
                    </select>
                </label>

js+ajax:

<script>
    $(document).ready(function () {

            $.ajax({
                url: "/Article/selectType",
                async: false,
                dataType: "json",
                type: "post",
                success: function (data) {

                    var html = [];
                    for (var i = 0; i < data.length; i++) {
                        html.push('<option value="' + data[i].id + '">' + data[i].typename + '</option>');
                    }
                    var province = $("#province");
                    province.append('<option value="14">请选择文章类型</option>');
                    province.append(html.join(''));

                },

            });

    })
</script>

Controller:

 @RequestMapping(value = "/selectType")
    @ResponseBody
    public String selectArticleType(Model model, HttpServletResponse response) throws IOException {

        List<ArticleType> list = articleTypeService.listArticleType();
        response.setContentType("text/html;charset=utf-8");
        String str = JSON.toJSON(list).toString();
        PrintWriter a = response.getWriter();
        a.write(str);
        return null;
    }

二、回显

点击修改跳到此Controller

   @RequestMapping("/Article_update/{id}")
    public String ArticleUpdate(@PathVariable Integer id, Model model) {
        model.addAttribute("id", id);
        Article dto = bizService.detail(id);

        model.addAttribute("article", dto);
        return PREFIX + "Article_edit";
    }

HTML页面：

                <label>文章类型:
                    <select id="articletype" name="articletype">
                    </select>
                </label>

js:

<script>
    $(document).ready(function(){
        $.ajax({
            url: "/Article/selectType",
            async: false,
            dataType: "json",
            type: "post",
            success: function (data) {

                var html = [];
                for (var i = 0; i < data.length; i++) {
                    html.push('<option value="' + data[i].id + '">' + data[i].typename + '</option>');
                }
                var articletype = $("#articletype");
                articletype.append(html.join(''));

            },

        });

        $("#articletype").find("option[value=${article.articletype}]").attr("selected",true);

    })
</script>

跳转的Controller如下：</Article/selectType>

    /**
     * 文章类型查询
     */
    @RequestMapping(value = "/selectType")
    @ResponseBody
    public String selectArticleType(Model model, HttpServletResponse response) throws IOException {

        List<ArticleType> list = articleTypeService.listArticleType();
        response.setContentType("text/html;charset=utf-8");
        String str = JSON.toJSON(list).toString();
        PrintWriter a = response.getWriter();
        a.write(str);
        return null;
    }