jQuery関数を再構築し、
メソッドを使用して都市ドロップダウンメニューを削除してから、新しいオプションを追加します。 [必須]を検証できるようにするための最初のオプションとして、の代わりにの使用を検討してください。
.empty()
ajax Calls val(null)冗長なAJAXコールを回避するために、各州に都市データを保存するためにキャッシュメカニズムが達成されます。 val(0)
var url = '@Url.Action("GetCities", "Home")'; var cities = $('#CityID'); $('#StateID').change(function() { $.getJSON(url, { id: $(this).val() }, function(response) { cities.empty().append($('<option>').val(null).text('请选择')); $.each(response, function(index, item) { cities.append($('<option>').val(item.Value).text(item.Text)); }); }); });
州と都市の数が限られている場合、すべての都市を視界に渡すことを検討し、jQueryを使用して、州の選択に応じて対応する都市をフィルタリングして表示できます。
コントローラーの:
var cache = {}; $('#StateID').change(function() { var selectedState = $(this).val(); if (cache[selectedState]) { // 从缓存中渲染选项 // ... 使用 cache[selectedState] 渲染城市下拉菜单 ... } else { $.getJSON(url, { id: selectedState }, function(response) { // 添加到缓存 cache[selectedState] = response; // ... 使用 response 渲染城市下拉菜单并添加到缓存 ... }); } });
<提>その他のヒント
非侵襲的JavaScriptを使用して、マークと動作を分離します。
model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();
// 将所有城市赋值给JavaScript数组 var allCities = JSON.parse('@Html.Raw(Json.Encode(Model.CityList))'); $('#StateID').change(function() { var selectedState = $(this).val(); var cities = $.grep(allCities, function(item, index) { return item.CountryID == selectedState; }); // 基于cities的值构建选项 // ... 使用 cities 数组渲染城市下拉菜单 ... });
以上がMVCの2つの従属ドロップダウンのロードを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。