选择下拉菜单后如何显示结果答案

【问题标题】：How to show Result after selecting dropdown选择下拉菜单后如何显示结果
【发布时间】：2016-02-09 18:20:27
【问题描述】：

我想在从下拉列表中选择一个部门后显示课程代码。它从数据库中搜索并获取但不在浏览器中显示。这是下拉列表：

 <select name="Id" id="Id">
                        <option value="">Select Department</option>
                        @foreach (var departments in ViewBag.ShowDepartments)
                        {
                            <option value="@departments.Id">@departments.Name</option>
                        }
                    </select>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
<script>
    $(document).ready(function() {
        $("#Id").change(function() {
            var departmentId = $("#Id").val();

            var json = { departmentId: departmentId };
            $.ajax({
                type: "POST",
                url: '@Url.Action("ViewAllScheduleByDept", "ClassSchedule")',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(json),
                success: function (data) {

                    //$("#myTable").append('<tr><th>ID</th><th>Name</th></tr>');

                    $('#Code').val(data.Code);
                    //$('#ContactNo').val(data.ContactNo);
                    //$('#Type').val(data.Type);
                }
            });
        });
    });

</script>

我正在使用 mvc。

【问题讨论】：

您的 ViewAllScheduleByDept 方法看起来如何？你从那里返回什么？
您好。请不要在您的问题中添加“尽快”，或以其他方式求紧急。这里的志愿者可能会解决您的问题，如果他们这样做，那将是他们的闲暇时间。

标签： c# jquery json asp.net-mvc-5 cascadingdropdown

【解决方案1】：

只要ViewAllScheduleByDept 操作方法返回带有Code 属性的json 结构，您的代码就应该可以正常工作。

[HttpPost]
public ActionResult ViewAllScheduleByDept(int departmentId)
{  
   //values hardcoded for demo. you may replace it value from db table(s)
   return Json( new { Code="HardcodedValue", ContactNo="12345"} );
}

并且您的页面中有一个带有 Id 属性值的输入表单元素作为代码

<input type="text" id="Code" />

并且您没有任何其他阻止您的 js 代码执行的脚本错误。

另外，由于您只发送 Id 值，因此您实际上不需要使用 JSON.stringify 方法，也不需要指定 contentType 属性值。

$("#Id").change(function () {

    $.ajax({
        type: "POST",
        url: '@Url.Action("ViewAllScheduleByDept", "ClassSchedule")',
        data: { departmentId: $("#Id").val() },
        success: function (data) {
            alert(data.Code);
            $('#Code').val(data.Code);
        }
        ,error:function(a, b, c) {
            alert("Error" + c);
        }
    });

});

【讨论】：

我的方法是：- public JsonResult ViewAllScheduleByDept(int departmentId) { var schedules = GetAllSchedule(); var scheduleList = schedules.Where(a => a.departmentId == departmentId).ToList();返回 Json(scheduleList, JsonRequestBehavior.AllowGet); }
那么发生了什么？您正在向该方法发出 POST ajax 请求。

【解决方案2】：

在追加之前使用最后一个

$("#myTable").last().append("<tr><td>ID</td></tr><tr><td>Name</td></tr>");

详情请看链接

Add table row in jQuery

【讨论】：