如何使用Jquery更新强类型的Html.DropDownList [英] How to update strongly typed Html.DropDownList using Jquery

问题描述

我有一个带有两个单选按钮和一个下拉列表的网页，如下所示:

I have a webpage with two radiobuttons and a dropdownlist as follows:

<div class="sectionheader">Course
    <div class="dropdown"><%=Html.DropDownList("CourseSelection", Model.CourseList, new { @class = "dropdown" })%> </div>         
    <div class="radiobuttons"><label><%=Html.RadioButton("CourseType", "Advanced", false )%> Advanced </label></div>
    <div class="radiobuttons"><label><%=Html.RadioButton("CourseType", "Beginner", true )%> Beginner </label></div>
</div>

下拉列表的类型很强，并使用Model.CourseList填充(注意-在第一页加载时，"Beginner"是默认选项，并且下拉列表相应地显示了初学者课程选项)

The dropdownlist is strongly typed and populated with Model.CourseList (NB - on the first page load, 'Beginner' is the default selection and the dropdown shows the beginner course options accordingly)

我想做的是根据选择了哪个单选按钮来更新DropDownList，即如果选择了高级"，则在下拉菜单中显示一个课程选项列表，如果选择了初学者"，则显示另一个课程列表

What I want to be able to do is to update the DropDownList based on which radiobutton is selected i.e. if 'Advanced' selected then show one list of course options in dropdown, and if 'Beginner' selected then show another list of courses.

编辑-在下面发布我自己的答案，以显示最适合我的解决方案

推荐答案

我想调用的代码位于我的控制器中:

The code I would like to call sits within my Controller:

public ActionResult UpdateDropDown(string courseType)
    {
        IDropDownList dropdownlistRepository = new DropDownListRepository();
        IEnumerable<SelectListItem> courseList = dropdownlistRepository.GetCourseList(courseType);
        return Json(courseList);
    }

使用 jQuery in Action 中提供的示例，我现在具有以下jQuery代码:

Using examples provided in jQuery in Action, I now have the following jQuery code:

$('.radiobuttons input:radio').click(function() 
{
    var courseType = $(this).val(); //Get selected courseType from radiobutton
    var dropdownList = $("#CourseSelection"); //Ref for dropdownlist
    $.post("/ByCourse/UpdateDropDown", { courseType: courseType }, function(data) {
    $(dropdownList).loadSelect(data);
    });
 });

loadSelect函数直接取自本书，内容如下:

The loadSelect function is taken straight from the book and is as follows:

(function($) {
    $.fn.emptySelect = function() {
        return this.each(function() {
            if (this.tagName == 'SELECT') this.options.length = 0;
        });
    }

$.fn.loadSelect = function(optionsDataArray) {
    return this.emptySelect().each(function() {
        if (this.tagName == 'SELECT') {
            var selectElement = this;
            $.each(optionsDataArray, function(index, optionData) {
            var option = new Option(optionData.Text, optionData.Value);

                if ($.browser.msie) {
                    selectElement.add(option);
                }
                else {
                    selectElement.add(option, null);
                }
            });
        }
    });
}
})(jQuery);

这篇关于如何使用Jquery更新强类型的Html.DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！