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）在初始阶段加载选择元素，并绑定onChange操作：

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

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

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

3）根据所选状态加载城市的功能，在选择更改时触发：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText; //get response
        }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); //send request
}

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

我希望这会对你有所帮助。

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

1 个答案: