Javascript 根据MVC列表框和复选框的值更改标记元素

假设我的MVC视图中有以下标记：

<div class="row">
            <div class="col-xs-6">
                <label>UI Element:</label>
                @Html.DropDownListFor(m => m.SelectedUIItem, Model.UIItems)
            </div>
            <div class="col-xs-6">
                @Html.LabelFor(m => m.UseWholeMarkup)
                @Html.CheckBoxFor(m =>m.UseWholeMarkup)
            </div>

            </div>

UI元素：
@DropDownListFor（m=>m.SelectedUIItem，Model.UIItems）
@LabelFor（m=>m.usehowlemarkup）
@CheckBoxFor（m=>m.UseWholeMarkup）

我想获取下拉列表和复选框的值，并动态更改这些元素下面显示的内容，而无需回发。我需要使用JQuery/JavaScript来完成这项工作吗？怎么做

视图模型为：

 // DropDownList
        public string SelectedUIItem { get; set; }
        public IEnumerable<SelectListItem> UIItems { get; set; }

        // Checkbox
        [DisplayName("Use Whole Markup ")]
        public bool UseWholeMarkup { get; set; }

//DropDownList
公共字符串SelectedUIItem{get；set；}
公共IEnumerable UIItems{get；set；}
//复选框
[DisplayName（“使用整个标记”）]
公共布尔值UseWholeMarkup{get；set；}

下拉列表中填充有：

List<SelectListItem> listUIItems = new List<SelectListItem>();
            // DropDownList
            SelectListItem selList2 = new SelectListItem
            {
                Text = "HEADER",
                Value = "HEADER",
                Selected = false
            };
            listUIItems.Add(selList2);
            selList2 = new SelectListItem
            {
                Text = "BODY",
                Value = "BODY",
                Selected = false
            };
            listUIItems.Add(selList2);
            // DropDownList
            selList2 = new SelectListItem
            {
                Text = "FOOTER",
                Value = "FOOTER",
                Selected = false
            };
            listUIItems.Add(selList2);
            UIItemsViewModel viewModel = new UIItemsViewModel
            {
                UIItems = listUIItems
            };

List listuitems=new List（）；
//下拉列表
SelectListItem selList2=新建SelectListItem
{
Text=“HEADER”，
Value=“HEADER”，
所选=错误
};
添加（selList2）；
selList2=新建SelectListItem
{
Text=“BODY”，
Value=“BODY”，
所选=错误
};
添加（selList2）；
//下拉列表
selList2=新建SelectListItem
{
Text=“FOOTER”，
Value=“FOOTER”，
所选=错误
};
添加（selList2）；
UIItemsViewModel viewModel=新UIItemsViewModel
{
UIItems=列表UIItems
};

我认为“无回发”是指无需重新加载页面。很好地使用AJAX可能需要一篇文章，但不会导致页面重新加载。无论如何，是的，如果您想在不重新加载整个页面的情况下更改页面的一部分，则必须使用JavaScript。如果您想通过从服务器检索的内容来更改该部分，那么具体来说，您必须使用AJAX。

提供一个完整的示例，这超出了StackOverflow的范围。您有责任尝试解决方案，然后我们可以帮助您解决可能遇到的特定问题。