Question

我在这里有一个工作表，该工作表从数据库填充下拉列表，我想在这里执行的是基于第一个下拉列表中的选定值显示第二个下拉列表的值，但是我要怎么做。如果选择了第一个下拉菜单中的错误，则“我的班级”只会显示在第二个下拉菜单中

//我的屏幕截图，我唯一的示例数据 enter image description here

后端代码：

 <picture>
          <source srcset="/assets/images/logo-text-lg.webp" class="my-picture" type="image/webp">
          <source srcset="/assets/images/logo-text-lg.png" class="my-picture" type="image/png" >
          <img src="/assets/images/logo-text-lg.png" class="my-picture" alt="TechScore">
 </picture>

<style>
        .my-picture {
          width: 448px;
          height: 60px;
        }

        @media only screen and (max-width : 480px) {
          .my-picture {
            width: 100%;
            height: auto;
          }
        }

       @media only screen and (max-width : 667px) {
          .my-picture {
            width: 50%;
            height: auto;
          }
        }

       @media only screen and (min-width : 668px) {
          .my-picture {
            width: 448px;
           height: 60px;
          }
        }

</style>

查看：

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

JavaScript代码：

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

Answer 1

您必须在第二个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子句的数据库查询中使用它。

Answer 2

首先，在脚本部分，您需要如下所示的拆分功能。您会看到我在第二个code parameter方法中添加了GetClassCategory：

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

第二，您需要处理onchange()事件，因为在选择第一个下拉菜单的另一个项目时，您需要获取它的值。

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

根据第一个下拉列表显示下拉列表中的值

2 个答案: