如何实现select2.js c# ajax调用不起作用

Question

您好，我想使用 select2.js 加载国家和城市，我该如何实现？我进行 ajax 调用以加载国家和城市的详细信息...我在尝试使用 webmethod 进行 ajax 调用以加载数据时遇到问题。 BindCountryData 和 BidnStateData 永远不会被调用，请建议我解决方案，我应该做些什么改变才能打电话。

$(document).ready(function){
 country();
}
 function country(){
  $(".autosuggest").select2({
            minimumInputLength: 1,
             placeholder: "Select Item",
             allowClear: true,                
            ajax: {
                type: "POST",
                url: 'country.aspx/BindCountryData',
                async : false,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",                    
                data: function(term) { 
                return {
                        country: term
                        };
                    },
                results: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {                                
                                text: item.completeName,
                                slug: item.slug,
                                id: item.id

                            }})};}}});}}


 $('.autosuggest').change(function () {
            searchState();
        });

 function searchState(){
 $(".State").select2({
            minimumInputLength: 1,
             placeholder: "Select State",
             allowClear: true,                
            ajax: {
                type: "POST",
                url: 'state.aspx/BidnStateData',
                async : false,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",                    
                data: function(term) { 
                return {
                        state: term,
                        countryId : $('.autosuggest').val()
                        };
                    },
                results: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {                                
                                text: item.completeName,
                                slug: item.slug,
                                id: item.id

                            }
                        })
                    };
                }
            }
        });    
            }}

Answer 1

我一直在我的项目中使用以下方法：

1) 初始阶段加载select元素，并绑定onChange动作：

    <select class="selectcombusca" name="zone_id" onChange="carregacidades($('option:selected',this).val());">
         <option value="#">Select State</option>
         <option value="1">State 1</option>
         <option value="2">State 2</option>
    </select>

    <select class="selectcombusca" name="cidade_id">
         <option value="#">Select City</option>
         <option value="1">City 1</option>
         <option value="2">City 2</option>
    </select>

2) 将 select2 应用于初始元素：

    $(".selectcombusca").select2();

3) 根据选择状态加载城市的函数，在选择更改时触发：

    function carregacidades(zone_id) {
        $.ajax({
            url: your-url,
            type: 'post',
            dataType: 'json',
            data: 'zone_id=' + zone_id, //from the selected option
            beforeSend: function() {
                $('select[name=\'cidade_id\']').hide();
                $('select[name=\'cidade_id\'] + .select2').hide();
                //I like to hide the inital element so the user can undestand there's a call being made, avoiding multiple changes on the element.
                $('select[name=\'cidade_id\']').after('<span class="loading">Loading Indicator<span>'); //I also like to put some kind of loading indicator, like a spinner
            },
            complete: function() {
                $('.loading').remove(); //remove the loading indicator
                $('select[name=\'cidade_id\']').show(); //show DOM element
                $("select[name=\'cidade_id\']").select2().val('#'); //rerender select2 and set initial option
                $('select[name=\'cidade_id\'] + .select2').show(); //show select2 element
            },
            success: function(json) {
                //create the new options based on the call return
                html = '<option value="#">Cidade</option>';
                if (json['cidade'] && json['cidade'] != '') {
                    for (i = 0; i < json['cidade'].length; i++) {
                        html += '<option value="' + json['cidade'][i]['cityId'] + '">' + json['cidade'][i]['cityName'] + '</option>';
                    }
                }

                $('select[name=\'cidade_id\']').html(html); //replace select options on DOM
            },
            error: function(xhr, ajaxOptions, thrownError) {
                //handle error
            }
        });
    };

简而言之：通过更改选择元素，我隐藏了将接收新信息的元素，进行调用，添加然后将信息添加到 DOM（仍然隐藏）。最后，使用新选项重新渲染 select2 元素，然后显示它。

希望对你有帮助。