Jquery——动态加载 option

最新推荐文章于 2019-04-02 17:39:54 发布

HenrikWen

最新推荐文章于 2019-04-02 17:39:54 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： 07前端

本文链接：https://blog.youkuaiyun.com/hhhhhhenrik/article/details/84313088

07前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript和AJAX动态填充HTML下拉列表的方法，通过从服务器获取省份列表并将其添加到select元素中，实现了下拉列表的动态更新。文章详细展示了如何清空原有选项、接收服务器返回的JSON数据并转换为下拉选项，最后刷新selectpicker组件以确保视图正确更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老是忘，记录一下

html：

 <div class="col-md-4">                    
     <label class="control-label col-md-4">省份</label>                       
     <select class="form-control selectpicker" id="ProvinceId"name="ProvinceId" >
     </select>
                       
 </div>

js：

    function GetProvince() {
            $("select[name=ProvinceId]").empty();
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "@Url.Action("getProvinceList")",
                success: function (res) {
                    debugger
                    var option = "<option value=\"\">请选择</option>";
                    for (var i = 0; i < res.length; i++) {
                        option+="<option value=\"" + res[i].Value + "\">" + res[i].Text + "</option>";
                    }
                    $("select[name=ProvinceId]").append(option);
                    $("select[name=ProvinceId]").selectpicker('refresh');
                }
            })

        }

如果option列表没有值，刷新一下selectpicker;

 $("select[name=ProvinceId]").selectpicker('refresh');