0

私は2-level cascading dropdown list使用JQUERYして構築しようとしていますJSON

第 1 レベルにはcountries、第 2 レベルには が表示されcitiesます。

第 2 レベルはdisabled、第 1 レベルから値が選択されるまでです。

CountriesCities結合されたテーブルであり、 はテーブル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>

何が機能しますか？

2 番目のドロップダウン リストは、最初のドロップダウン リストがクリックされるまで無効になります。

最初のドロップダウンをクリックすると、国が一覧表示されます

Json.Write/getJSON が期待どおりに機能しない場合、既に /GetCities/ を試してみましたが、役に立ちませんでした。

専門家のアドバイスありがとうございます。

4

0 に答える 0