基於MVC3方式實作下拉列表連動(JQuery)_jquery

上次專案中遇到一個需要多個下拉清單連動的操作，今天有空將實作方式整理以便日後參考。
要達到的效果是，點選一個下拉框，則另一個下拉框的值會發生對應變化。如：選擇中國，則另一個一下拉框裡顯示中國各省。
傳統的HTML方式較簡單，實際上基於MVC的實作方式也大同小異。

直接上碼：

複製程式碼 程式碼如下:

程式碼如下:

DP_Provice
{
public int proviceID { get; set; }
public string ProviceName { get; set; }
public int ProviceNode { get; set; }
public virtual List}

public class DP_City
{
public int CityNode { get; set; }
public string CityName { get; set; }
public string ProviceNode { get; set; }

}

對以上涉及的實體類別予以賦值，暫時使用一個靜態類別初始化簡單資料： 複製程式碼

程式碼如下:


public static class DPDataSource
{
public static List
{
List source = new List
{
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List{
new DP_City{
CityNode=11, CityName="北京海淀"
},
new DP_City{
CityNode=12,CityName="北京西城"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="山東", citySource=new List{
new DP_City{
CityNode=21, CityName="濟南"
},
CityNode=21, CityName="濟南"
},
},
new DP_City{
CityNode=22,CityName="德州"
}
}},
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List{
new DP_City{
CityNode=31, CityName="石家莊"
},
new DP_City{
CityNode=32,CityName="衡水"
}
}}
}

} >};

return source;

} } 具體在Controller中的調用，因為使用的JQuery中的AJAX方式，所以返回的結果類型為Json;

複製程式碼


程式碼如下:



return View("DPShow");
}
List source = DPDataSource.InitalData();

public JsonResult GetProvinceSource()
{
public JsonResult GetProvinceSource()
{
if>if source == null || source.Count {
source = DPDataSource.InitalData();
}
return Json(source, JsonRequestBehavior.AllowGet)； >public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData();

List citySource = new List();
Source => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
return Json(citySource, JsonRequestBehavior.AllowGet);

} }

複製程式碼 程式碼如下:

@model MvcApplication.Models.DP_Provice
@{
ViewBag.Title = "DPShow";
Layout = "~/Views/Shared/_Layout.cshtml";
<script type="text/javascript">
$(function myfunction() {
GetPlant();
//州データを初期化します
$("#ddlProvince") .change(function ff() { //都道府県ドロップダウン リストが変更されたときに都市データ リストを更新するように設定します。
GetCity();
}); function GetPlant () {
$("#ddlProvince").empty();
var url = "/Dropdown/GetProvinceSource/"
$.getJSON(url, function (data) {
$ .each(data, function (i, item) {
$("<option></option>")
.val(item["ProviceNode"])
.text( item[ "ProviceName"])
.appendTo($("#ddlProvince"))
GetCity()
}
関数 GetCity () {
$("#ddlCity").empty();
var temp=$("#ddlProvince").val(); ", "Dropdown")" ;
// MVC3 で Url.Action メソッドのパラメータを使用します:

$.getJSON(url,{"proviceName":temp}) , function ( data) {
//途中でパラメーターを使用する必要があるので、getJSON メソッドで実装します
$.each(data, function (i, item) {
$("&lt ;option></option> ;")
.val(item["CityNode"])
.text(item["CityName"])
.appendTo($("#ddlCity")) ;
});
}
</script<!
<h2>リンク</h2>
<tr>
<select id="ddlProvince" /> ><td>

</td>
</table> 🎜>説明:
一般 一般に、MVC を使用してドロップダウン リスト バインディングを実装する方法は数多くあります。主なデータ バインディング メソッドは JQuery の Ajax メソッドであり、カスタマイズされた MVC ベースの URL を使用することもできます。 .Acion メソッド。個人的には、MVC ベースのメソッドを使用することをお勧めします。
第一に、サポート方法は比較的柔軟です。データ型が複雑な場合は、データのカプセル化を実装するようにカスタマイズできます。
第二に、パラメータを渡すときに JQuery の URL をフォーマットする必要があります。そうでない場合、指定された URL はフォーマットされません。アクションが見つかりません。
上記の記述またはより良い実装計画に異議がある場合は、修正または説明を提供してください。ありがとうございます。