Jquery 在 ajax 调用后删除、添加和刷新 select 列表（车把、nodejs）

Question

我正在尝试在用户从另一个 select 框中选择一个值后为 select 列表删除和添加新选项。我正在使用 ajax 调用 api 并且一切正常。但是，在我删除或添加新选项后，select 列表的 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 的回答太棒了。此外，我的一个朋友发现 select 框不会自行重新加载的原因。他发现该网站的模板使用了一个名为 Zelect 的库。但是，当我尝试附加该选项时，Zelect 不知何故不会重新加载 select 框。所以我所要做的就是强制 Zelect 重新加载选择框，一切正常。

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

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

Jquery 在 ajax 调用后删除、添加和刷新 select 列表（车把、nodejs）

Jquery remove, add and refresh select list after ajax call (handlebars, nodejs)

javascript

ajax

jquery

node.js

handlebars.js