0

我正在尝试建立一个2-level cascading dropdown list使用JQUERY和JSON

第一级应该列出countries，第二级，cities.

第二级应该是disabled直到从第一级选择一个值。

Countries并且Cities是连接表，表中的CountryId外键在哪里Cities

这将检索国家/地区列表

var db = Database.Open("MyDatabase");
var sqlCountryData = "SELECT CountryId, Name FROM Countries ORDER BY Name";
var countryData = db.Query(sqlCountryData);

对于城市列表，我使用的是external file被调用的GetCities. 它与主文件夹位于同一文件夹中。

这将/应该根据 Jquery 函数传递的 countryId 检索城市列表（我猜它在那里不起作用）

Layout = null;
var countryId = UrlData[0].IsEmpty() ? 3 : UrlData[0].AsInt();
var db = Database.Open("MyDatabase");
var sqlCityData = "SELECT CityId, Name AS CityName FROM Cities WHERE CountryId = @0 ORDER BY Name";
var cityData = db.Query(sqlCityData, countryId);
Json.Write(cityData, Response.Output);

这是 HTML 标头中的 Javascript 部分：

<head>
    <meta charset="utf-8" />
    <script src="~/scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            var citySelect = $('#cityId');
            citySelect.attr('disabled', true);
            $('#countryId').change(function() {
                var countryId = $(this).val();
                $.getJSON('/GetCities/' + countryId, function (cityData) {
                    citySelect.attr('disabled', false);
                    citySelect.empty();
                    citySelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Sélectionner --'));
                    $.each(cityData, function (index, city) {
                        citySelect.append(
                            $('<option/>')
                                .attr('value', city.CityId)
                                .text(city.CityName)
                        );
                    });
                });
            });
        });
    </script>
</head>

和 HTML 标记

<li><label for="countryName">Pays</label>
    <select id="countryId" name="countryId">
        <option value="">-- Veuillez sélectionner --</option>
        @foreach(var countryrow in countryData) {
            <option value=@countryrow.CountryId>@countryrow.Name</option>
        }
    </select>
</li>

<li><label for="cityId">Ville</label>
    <select id="cityId"></select>
<li>

什么有效？

在单击第一个下拉列表之前，第二个下拉列表被禁用

第一个下拉列表列出了单击时的国家/地区

看起来如果 Json.Write/getJSON 没有达到我已经尝试过使用 /GetCities/ 的预期效果，但它没有帮助！

感谢您的专家建议。

4

0 回答 0