遇到了這樣的一個(gè)需求：通過(guò)勾選checkbox來(lái)更改select的內(nèi)容。

在沒有勾選checkbox之前是這樣的：

在勾選checkbox之后是這樣的：

想通過(guò)ajax異步來(lái)實(shí)現(xiàn)。所以，從控制器拿到的json數(shù)據(jù)，在控制器中應(yīng)該先是Dictionary<string, string>類型，然后再轉(zhuǎn)換成json格式。

在沒有勾選checkbox之前，select中內(nèi)容對(duì)應(yīng)的Model為：

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

在勾選checkbox之后，select中內(nèi)容對(duì)應(yīng)的Model為：

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

Home控制器中應(yīng)該給出對(duì)應(yīng)的json數(shù)據(jù)。

   public class HomeController : Controller    {public ActionResult Index(){    return View();}public ActionResult GetOld(){    var olds = new List<Old>    {new Old(){Id = 1, Name = "老版本1"},new Old(){Id = 2, Name = "老版本2"},new Old(){Id = 3, Name = "老版本3"}    };    IDictionary<string, string> result = new Dictionary<string, string> {{"-1","None"}};    foreach (var item in olds)    {result.Add(item.Id.ToString(), item.Name);    }    return Json(result, JsonRequestBehavior.AllowGet);}public ActionResult GetNew(){    var news = new List<NewItem>    {new NewItem(){Id = 1, Name = "新版本1"},new NewItem(){Id = 2, Name = "新版本2"}    };    IDictionary<string, string> result = new Dictionary<string, string> { { "-1", "None" } };    foreach (var item in news)    {result.Add(item.Id.ToString(), item.Name);    }    return Json(result, JsonRequestBehavior.AllowGet);}    }

在Home/Index.cshtml視圖中，根據(jù)checkbox是否勾選來(lái)呈現(xiàn)不同的內(nèi)容。

@{    ViewBag.Title = "Index";    Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2><div>    <select id="v"></select></div><div>    <span>是否選擇新版本：</span><input type="checkbox" id="cn"/></div>@section scripts{    <script type="text/javascript">$(function () {    //初始獲取老版本    getOldOnes();    //勾選checkbox事件    $("#cn").on("change", function() {if ($(this).is(":checked")) {    getNewOnes();} else {    getOldOnes();}    });});//獲取老版本function getOldOnes() {    $.getJSON("@Url.Action("GetOld","Home")", function(data) {var $s = $("#v");$s.children().remove();$.each(data, function(key, value) {    $s.append("<option value="" + key + "">" + value + "</option>");});$s.effect("shake", { times: 4 }, 100);    });}//獲取新版本function getNewOnes() {    $.getJSON("@Url.Action("GetNew","Home")", function (data) {var $s = $("#v");$s.children().remove();$.each(data, function (key, value) {    $s.append("<option value="" + key + "">" + value + "</option>");});$s.effect("shake", { times: 4 }, 100);    });}    </script>}

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接