Javascript 基于第一个下拉列表在下拉列表中显示值

我有一个从数据库填充下拉列表的工作表单，我想在这里根据第一个下拉列表中选择的值显示第二个下拉列表的值，但是我要怎么做呢。如果选择了第一个下拉列表中的错误，则我的类将仅在第二个下拉列表中显示

//我的截图，我唯一的样本数据

后端代码：

        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);
        }

public JsonResult GetErrorCategory（）
{
列表错误=errorDataAccessLayer.GetAllError（操作）；
返回Json（错误。选择（x=>new
{
errorCode=x.errorCode，
errorDescription=x.errorDescription
}).ToList（），JsonRequestBehavior.AllowGet）；
}
公共JsonResult GetClassCategory（）
{
List error=errorDataAccessLayer.GetAllClass（操作）；
返回Json（错误。选择（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>

$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“/Ticket/GetErrorCategory”，
数据：“{}”，
成功：功能（数据）{
var s='选项值=“-1”>请选择错误类型'；
对于（变量i=0；i

您必须在第二个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);

                }

            });

var error=document.getElementById（“ErrorDropdown”）.value；
$.ajax({
类型：“POST”，
url:“/Ticket/GetClassCategory”，
数据：“{error:error}”，
成功：功能（数据）{
var s='选项值=“-1”>请选择类别类型'；
对于（变量i=0；i

---

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

首先，在脚本部分，您需要如下所示的拆分函数。您可以看到，我在第二个

GetClassCategory

方法中添加了

code参数

：

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);
        }
    });
}

第三，必须从documentready函数调用

GetErrorCategory（）

方法

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

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

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);
}

publicjsonresult GetClassCategory（字符串代码）//我添加了参数
{
Listerror=errorDataAccessLayer.GetAllClass（操作）；
返回Json(
错误
.Where（x=>x.ClassCode=code）//我添加了这个部分
.选择（x=>new
{
classCode=x.classCode，
classDescription=x.classDescription
}).ToList（），JsonRequestBehavior.AllowGet）；
}

Yo必须处理第一个下拉列表的onchange（）事件，然后将所选项目值传递给第二个方法我是否需要一些onchange（）？是的，因为onchange（）是从第一个下拉列表更改中获得确切错误的唯一方法。在此之后，您的第二个ajax将在同一个onchange（）中调用。您好，我非常感谢您的努力，但是第二个下拉列表。不会更改任何内容，并且对于ApplyErrorCategorHydropDownonChange（），数据不会突出显示

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);
}