Bootstrap的Select异步刷新时有问题

最新推荐文章于 2025-05-12 03:28:12 发布

茉莉花茶

最新推荐文章于 2025-05-12 03:28:12 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery bootstrap 文章标签： Bootstrap select json

本文链接：https://blog.youkuaiyun.com/zhaoyingjiao/article/details/40377009

jQuery 同时被 2 个专栏收录

12 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

在使用Bootstrap的select组件并尝试通过JSON数据异步更新选项时，遇到<select>元素内内容未更新的问题。尝试了两种方法：1) 使用$.append()添加Option，能更新Select但不反映在显示的<ul>中；2) 能更新显示的option，但无法选中所点击的选项。解决方案包括同事的方法和作者自有的jQuery实现。

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

使用bootstrap的select控件后，用$().append()option，发现<ul>里面的内容没有跟着改变，<select id="OS" class="span2 chosen chzn-done">和<div id="OS_chzn" class="chzn-container undefined chzn-container-single">里面的<ul>是对应的。用JSON返回的数据异步刷新select时，ul里面的值没有改变，尝试过下面两张方法都不行：

1. 这种可以添加Select里面的Option，但是不能改变div里面ul里面的值。页面展示没有刷新。

var ajaxUrl = '/config/loadTypeValues?page_no=1&page_size=100&searchContent=' + typeName;
            $.ajax({
                type:'get',
                url:ajaxUrl,
                dataType:'json',
                cache:false,
                success:function(data){
                    alert(data);
                    for (var i=0; i < data.length; i++) {
                        $('#' + typeName).append("<option value=" + data[i][3] + ">" + data[i][1]+ "</option>");
                    }
                },
                error:function(){
                    jAlert('There are some errors happened');
                }
            });

2. 下面这种是不能改变Select里面的值，可以刷新改变显示的option元素，也就是页面展示有变化，就是ul里面的值变了，但是选不中你点击的那个option。

$('#' + typeName + '_chzn ul').empty();
//                                     $('#' + typeName).append("<option value=''>-</option>");
//                                     $('#' + typeName + '_chzn ul').append("<li class='active-result' id=" + typeNameStr + "_chzn_o_0>-</li>");
                                     for (var i=0; i < data.length; i++) {
//                                         $('#' + typeName).append("<option value=" + data[i][3] + ">" + data[i][1]+ "</option>");
//
//                                         $('#' + typeName + '_chzn ul').append("<li class='active-result' id=" + typeNameStr + "_chzn_o_" + i + 1 + ">" + data[i][1] + "</li>");
                                     }
                                 },

Html：

<c:when test="${type.controlStyle == 2}">
                            <div class="control-group">
                                <label class="control-label">${type.typeName}</label>
                                <div class="controls" id="controls-${type.typeNameStr}">
                                    <select id="${type.typeNameStr}" name="" class="span2 chosen"  onchange="" tabindex="0">
                                        <c:set var="typeValues" value="${type.typeValues}"/>
                                        <option>-</option>
                                        <c:forEach var="typeValue" items="${typeValues}" >
                                            <option value="${typeValue[3]}">${typeValue[1]}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </c:when>

解决方法如下：

1. 看到同事的做法（点击打开链接）

2. 我的做法：

Jquery：

success:function(data){
                                     $('#' + typeNameStr).remove();
                                     $('#' + typeNameStr + '_chzn').remove();
                                     var optionElement = "<option>-</option>";
                                     for (var i=0; i < data.length; i++) {
                                        optionElement += "<option value=" + data[i][3] + ">" + data[i][1]+ "</option>";
                                     }

                                     var selectElement = "<select id='" + typeNameStr + "' name='' class='span2 chosen' tabindex='0'> " + optionElement + " </select>"
                                     alert(selectElement)
                                     $('#controls-' + typeNameStr).append(selectElement);
                                 },
                                 error:function(){
                                     jAlert('There are some errors happened');
                                 }
                             });