根据第一个下拉菜单在下拉菜单中显示值

Question

我在这里有一个工作表单，它从数据库中填充下拉列表，我在这里要做的是根据第一个下拉列表中的选定值显示第二个下拉列表的值，但我将如何做。如果选择了第一个下拉列表中的错误，我的班级将仅显示在第二个下拉列表中

//我的截图，我唯一的样本数据 enter image description here

后端代码：

        public JsonResult GetErrorCategory()
        {

            List<ErrorCategory> error = errorDataAccessLayer.GetAllError(Action);
            return Json(error.Select(x => new
            {

                errorCode = x.ErrorCode,
                errorDescription = x.ErrorDescription
            }).ToList(), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetClassCategory()
        {

            List<ErrorClass> error = errorDataAccessLayer.GetAllClass(Action);
            return Json(error.Select(x => new
            {

                classCode = x.ClassCode,
               classDescription = x.ClassDescription
            }).ToList(), JsonRequestBehavior.AllowGet);
        }

查看：

    <form id="ticket_form" method="post" enctype="multipart/form-data">
       <div class="row">
          <div class="form-group col-md-4">
           <label><strong>Error Type</strong></label>
           <select name="ErrorType" id="ErrorDropdown" class="form-control ErrorType" >
      </select>
         </div>              
         </div>
      <div class="row">
       <div class="form-group col-md-4">
       <label><strong>Class Type</strong></label>
     <select name="ClassType" id="ClassDropdown" class="form-control ClassType" >
       </select>
         </div>
          </div>
        <div class="form-group">
        <input type="submit" id="addTicket" value="Create" class="btn btn-md btn-outline-secondary" style="margin:auto;display:block;" />
             </div>
          </form>

Javascript 代码：

<script>
        $(document).ready(function () {

            $.ajax({
                type: "POST",
                url: "/Ticket/GetErrorCategory",
                data: "{}",
                success: function (data) {

                    var s = 'option value="-1">Please Select Error Type</option>';

                    for (var i = 0; i < data.length; i++) {

                        s += '<option value="' + data[i].errorDescription + '">' + data[i].errorDescription + '</option>';

                    }
                    s += '<option value="Others">Others</option>';
                    $("#ErrorDropdown").html(s);

                }

            });



                $.ajax({
                    type: "POST",
                    url: "/Ticket/GetClassCategory",
                    data: "{}",
                    success: function (data) {

                        var s = 'option value="-1">Please Select Class Type</option>';

                        for (var i = 0; i < data.length; i++) {

                            s += '<option value="' + data[i].classDescription + '">' + data[i].classDescription + '</option>';

                        }
                        s += '<option value="Others">Others</option>';
                        $("#ClassDropdown").html(s);

                    }

                });
 });

</script>

Answer 1

首先，在脚本部分，您需要如下拆分函数。你看我在第二个GetClassCategory 方法中添加了code parameter：

function GetErrorCategory() {
    $.ajax({
        type: "POST",
        url: "/Ticket/GetErrorCategory",
        data: "{}",
        success: function (data) {
            var s = 'option value="-1">Please Select Error Type</option>';
            for (var i = 0; i < data.length; i++) {
                s += '<option value="' + data[i].errorDescription + '">' + data[i].errorDescription + '</option>';
            }
            s += '<option value="Others">Others</option>';
            $("#ErrorDropdown").html(s);

            // This line applies onchange event for errorcategory dropdown
            ApplyErrorCategoryDropDownOnChange();
        }
    }
}

function GetClassCategory(code) {
    $.ajax({
        type: "POST",
        url: "/Ticket/GetClassCategory",
        data: JSON.stringify({ code: code }),
        success: function (data) {
            var s = 'option value="-1">Please Select Class Type</option>';
            for (var i = 0; i < data.length; i++) {
                s += '<option value="' + data[i].classDescription + '">' + data[i].classDescription + '</option>';
            }
            s += '<option value="Others">Others</option>';
            $("#ClassDropdown").html(s);
        }
    });
}

Second, you need handle onchange() event, because when another item of the first dropwdown selected then you need get it's value.

function ApplyErrorCategoryDropDownOnChange() {
    $("#ErrorDropdown").change(function (data) {
        GetClassCategory(this.value)
    });
}

第三，你必须从文档准备函数中调用GetErrorCategory()方法。

$(function () {
    GetErrorCategory();
});

第四，您需要在后端部分添加代码参数，并将此参数应用于您的数据库查询：

public JsonResult GetClassCategory(string code) // I added parameter
{
    List < ErrorClass > error = errorDataAccessLayer.GetAllClass(Action);
    return Json(
        error
            .Where(x => x.ClassCode = code) // I added this section
            .Select(x => new
                {

                    classCode = x.ClassCode,
                    classDescription = x.ClassDescription
                }).ToList(), JsonRequestBehavior.AllowGet);
}

Answer 2

您必须在第二个 ajax 调用中更改您的代码，我的意思是它应该依赖于第一个下拉列表，为此您只需将第一个下拉列表的值获取到第二个下拉 ajax 调用即可选择。只是我在下面提到：

var error=document.getElementById("ErrorDropdown").value;
            $.ajax({
                type: "POST",
                url: "/Ticket/GetClassCategory",
                data: "{error:error}",
                success: function (data) {

                    var s = 'option value="-1">Please Select Class Type</option>';

                    for (var i = 0; i < data.length; i++) {

                        s += '<option value="' + data[i].classDescription + '">' + data[i].classDescription + '</option>';

                    }
                    s += '<option value="Others">Others</option>';
                    $("#ClassDropdown").html(s);

                }

            });

这里我有一个名为 error 的变量中的第一个下拉列表的值，我已经通过 ajax 调用将它传递并在我的数据库查询中使用 where 子句。