Question

我试图在用户从另一个选择框中选择一个值后，为选择列表删除并添加新选项。我正在使用ajax调用api，并且一切正常。但是，删除或添加新选项后，选择列表的html根本不会刷新。我在某种程度上做错了吗？

使用车把生成的HTML：

<select name="district" id="district">
   <option value="">Quận/ Huyện</option>
   <option value="1">District 1</option>
   <option value="2">District 2</option>
</select>


<select name="street-select" id="street">
   <option value="">Đường</option>
   {{#each streets}}
   <option value="{{name}}">{{name}}</option>
   {{/each}}
</select>

我的JavaScript：

var dropdownStreet = $('#street');
var dropdownDistrict = $('#district');
 $('#district').change(function () {
                dropdownStreet.empty();
                dropdownStreet.html('')
                var value = $('#district').find(":selected").text();
                $.ajax({
                    type: 'GET',
                    url: `http://localhost:3002/api/ajaxcall/getLocation`,
                    data: {
                        'value': value
                    },
                    success: function (data) {
                        console.log('success');
                        var result = data.data.streets
                        var streets = [];
                        streets = result.map(function (a) { return a.location; });
                        for (var i = 0; i < streets.length; i++) {
                            $('select[name=street-select]').append('<option value="' + streets[i] + '">' + streets[i] + '</option>').selectmenu('refresh',true);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('error');
                    }
                })
            })

谢谢。

Answer 1

我有一个像您一样的错误，我做了以下工作，它确实起作用。尝试将循环替换为以下内容：

for (var i = 0; i < streets.length; i++) {
    $('select[name=street-select]').append(
        $('<option>', {
            value: streets[i],
            text: streets[i]
        })
    )
}

您可以在这里参考：Adding options to a <select> using jQuery?

Answer 2

@Tran Audi的回答很棒。另外，我的一个朋友发现了导致选择框不自动加载的原因。他发现该网站的模板正在使用名为Zelect的库。但是，当我尝试附加选项时，Zelect不知何故不会重新加载选择框。因此，我要做的就是强迫Zelect重新加载硒鼓盒，一切正常。

$(".intro.street .zelect").remove()
$('.intro.street select').zelect({})

我必须在附加选项后添加这些行。

ajax调用后，jQuery删除，添加和刷新选择列表（车把，nodejs）

2 个答案: