选择下拉列表后如何显示结果

Question

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

 <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。

Answer 1

只要 ViewAllScheduleByDept 操作方法 returns 具有 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);
        }
    });

});

Answer 2

在追加之前使用 last

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

详情请见link

Add table row in jQuery

选择下拉列表后如何显示结果

How to show Result after selecting dropdown

c#

jquery

json

cascadingdropdown

asp.net-mvc-5