ajax調用后，jQuery刪除，添加和刷新選擇列表（車把，nodejs）

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]
        })
    )
}

您可以在這里參考： 使用jQuery向<select>添加選項嗎？

Answer 2

@Tran Audi的回答很棒。 另外，我的一個朋友發現了導致選擇框不自動加載的原因。 他發現該網站的模板正在使用名為Zelect的庫。 但是，當我嘗試附加選項時，Zelect不知何故不會重新加載選擇框。 因此，我要做的就是迫使Zelect重新加載硒鼓盒，一切正常。

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

我必須在附加選項后添加這些行。