在远程来源 (AJAX) Select2 中预选选项2

Question

我正在尝试从远程来源的 select2 控件中预先选择 select2 中的选项。我正在尝试遵循文档 在远程来源 (AJAX) Select2 中预选选项

我有一个显示地址信息的 aspnet core razor 页面。

如果数据库中已存在州和邮政编码信息，则页面加载时会显示该信息。如果数据不在数据库中，则通过选择城市将位置信息（城市、州、邮政编码）输入到表单中。

我遇到的唯一问题是，如果城市已存在于数据库中，则在页面加载时显示城市。下面的屏幕截图应该有城市“Chandler”。

这是剃刀页面的相关部分。

     <div class="col-md-7">
     <span><label asp-for="Organization.City"></label>&nbsp; <i class="fas fa-question-circle" title="@Html.TextBoxWithToolTipFor(m=> Model.Organization.City)"></i></span>
     <input type="text" class="form-control" asp-for="Organization.City" type="hidden">
     <select class="form-control" id="selectCity">
         <option value=""></option>
     </select>
     <span asp-validation-for="Organization.City" class="text-danger"></span>
 </div>
 <div class="col-md-3">
     <span><label asp-for="Organization.State"></label>&nbsp; <i class="fas fa-question-circle" title="@Html.TextBoxWithToolTipFor(m=> Model.Organization.State)"></i></span>
     <input type="text" class="form-control" asp-for="Organization.State" readonly>
     <span asp-validation-for="Organization.State" class="text-danger"></span>
 </div>

 <div class="col-md-2">
     <span><label asp-for="Organization.PostalCode"></label>&nbsp; <i class="fas fa-question-circle" title="@Html.TextBoxWithToolTipFor(m=> Model.Organization.PostalCode)"></i></span>
     <input type="text" class="form-control" asp-for="Organization.PostalCode" readonly>
     <span asp-validation-for="Organization.PostalCode" class="text-danger"></span>
 </div>

这是我的 select2 代码以及控制台输出。我没有收到任何错误，我只是无法预选城市。

 <script>
    $(document).ready(function () {
        $("#selectCity").select2({
            theme: 'bootstrap-5',
            placeholder: "Search for your city",
            dropdownAutoWidth: true,
            width: 'auto',
            minimumInputLength: 3,
            allowClear: true,
            async: true,
            templateResult: ({ city, state, zip }) => `${city}, ${state} ${zip}`,
            templateSelection: function (result) {

                if (result['id'] == "") {
                    result['city'] = result['text'];
                }

                return result['city'];
            },
            ajax: {
                url: ({ term }) =>
                    "@GatewaySettings.Value.Url" +
                    `/api/location/cities/${encodeURIComponent(term)}`, // encode the term,
                processResults: (results) => ({ results }),
            }
        }).on('select2:select', function (e) {
            var data = e.params.data;
            //console.log(data);

            if (data.id != "") {
                $("#Organization_City").val(data.city);
                $("#Organization_State").val(data.state);
                $("#Organization_PostalCode").val(data.zip);
            }
        }).on('select2:clear', function (e) {
            var data = e.params.data;
            // console.log(data);

            $("#Organization_City").val('');
            $("#Organization_State").val('');
            $("#Organization_PostalCode").val('');
        });

        if ($("#Organization_PostalCode").val() != "") {

            var selectCity = $('#selectCity');

            $.ajax({
                type: 'GET',
                url: "@GatewaySettings.Value.Url" +
                    `/api/location/postalcode/${encodeURIComponent(@Model.Organization.PostalCode)}` // encode the term,
            }).then(function (data) {
                console.log(data);
                // create the option and append to Select2
                var option = new Option(data.city, data.id, true, true);
                selectCity.append(option).trigger('change');

                // manually trigger the `select2:select` event
                selectCity.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        
        }           
    });
</script>

任何帮助表示赞赏

Answer 1

在对 select2 网站 和这篇 SO 帖子进行更多研究后，我一切正常。

这是我更新的工作代码

 <script>
 $(document).ready(function () {
     $("#selectCity").select2({
         theme: 'bootstrap-5',
         placeholder: "Search for your city",
         dropdownAutoWidth: true,
         width: 'auto',
         minimumInputLength: 3,
         allowClear: true,
         async: true,
         templateResult: function (result) {

             if (result.loading) return "Loading....";

             return result['city'] + ', ' + result['state'] + ' ' + result['zip']
             
         },
         templateSelection: function (result) { return result['city'] || result['text']; },
         ajax: {
             url: ({ term }) =>
                 "@GatewaySettings.Value.Url" +
                 `/api/location/cities/${encodeURIComponent(term)}`, // encode the term,
             processResults: (results) => ({ results }),
         }
     }).on('select2:select', function (e) {           
         var data = e.params.data;
         
         $("#Organization_City").val(data.city);
         $("#Organization_State").val(data.state);
         $("#Organization_PostalCode").val(data.zip);

     }).on('select2:clear', function (e) {
         var data = e.params.data;

         $("#Organization_City").val('');
         $("#Organization_State").val('');
         $("#Organization_PostalCode").val('');
     });

     if ($("#Organization_PostalCode").val() != "") {

         var selectCity = $('#selectCity');

         $.ajax({
             type: 'GET',
             url: "@GatewaySettings.Value.Url" +
                 `/api/location/postalcode/${encodeURIComponent(@Model.Organization.PostalCode)}`, // encode the term,
             processResults: (results) => ({ results })
         }).then(function (data) {
             // create the option and append to Select2
             var option = new Option(data.city, data.id, true, true);

             selectCity.append(option).trigger('change');

             // manually trigger the `select2:select` event
             selectCity.trigger({
                 type: 'select2:select',
                 params: {
                     data: data
                 }
             });
         });
     
     }           
 });