Question

是否有任何解决方案向用户显示所有国家/地区，在选择国家/地区后，它会重新选择其所在国家/地区最好选择脚本

P.S。俄罗斯国家名称

Answer 1

当然，有一个解决方案。您可以拥有包含Country和City属性的Id和Name个模型：

public class Country
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
}

这项行动将为您提供一个国家/地区的所有城市：

public class CountriesController : Controller
{
    public ActionResult Index()
    {
        IEnumerable<Country> countries = Repository.GetCountries();
        return View(countries);
    }
}

public class CitiesController: Controller
{
    public ActionResult Index(string countryId)
    {
        IEnumerable<City> cities = Repository.GetCities(countryId);
        return Json(cities);
    }
}

并且有类似的观点：

<%= Html.DropDownList("selectedCountry", new SelectList(Model, "Id", "Name")) %>
<%= Html.DropDownList("selectedCity", Enumerable.Empty<City>()) %>

然后设置javascript：

$(function() {
    $('#selectedCountry').change(function() {
        var selectedCountry = $(this).val();
        $.getJSON('/cities/index', { countryId: selectedCountry }, function(cities) {
            var citiesSelect = $('#selectedCity');
            citiesSelect.empty();
            $(json).each(function(i, city) {
                citiesSelect.append('<option value="' + city.Id + '">' + city.Name + '</option>');
            });
        });
    });
});

Answer 2

我的事情，更好的解决方案是使用JSON存在数据库。例如，您可以使用geonames.org

http://jqueryui.com/demos/autocomplete/#remote-jsonp

示例：

<meta charset="utf-8">  
    <style>
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
    #city { width: 25em; }
    </style>
    <script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

        $( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" />
    Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div><!-- End demo-description -->

Answer 3

如果您只需要一次性列表（而不是持续更新的内容），那么手动抓取Russian Wikipedia page for list of countries并不算太糟糕。也可以做一些与城市列表类似的事情，但试图获得完整的城市列表有点蛮干。我试着将它限制在世界上的前200名左右。

注意：我只是假设这是国家列表的页面，因为我不会说俄语，但这是我搜索时得到的第一个结果。

世界各国的城市名单

3 个答案: