Заполнить DropDownList на основе выбранного значения из другого DropDownList

Question

Я пытался заполнить DropDownList на основе значения из другого DropDownList в MVC .NET Core 2.2.

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Type :</label>
        <div class="col-sm-10">
            <select asp-for="SelectedType" asp-items="@(new SelectList(Model.TypeList, "TypeName", "TypeDescription"))" class="custom-select custom-select-sm">
            </select>
        </div>
</div>

public class Type
{
    public string TypeName { get; set; }
    public string TypeDescription { get; set; }
}

Я не знаком с JavaScript или Ajax и не могу представить примерна Google Out.

Таким образом, в основном, если вы выбираете в DropDownList «Тип», например, «A», DropDownList должен быть заполнен списком строк на основе «A», когда вы выбираете «B»,DropDownList должен быть заполнен списком строк, основанных на "B".

Может кто-нибудь привести мне очень простой пример?

Что-то вроде этого?

$(document).ready(function()  
{  
    $("#ddlEmployee").on("change", function()  
    {  
        $.ajax(  
        {  
            url: '/Home/GetTypesBasedOnValueFromOtherDropDownList' + $(this).attr("value"),  
            type: 'GET',  
            data: "",  
            contentType: 'application/json; charset=utf-8',  
            success: function(data)  
                {  
                    $("#???").html(data);  
                },  
            error: function()  
            {  
                alert("error");  
            }  
        });  
    });  
}); 
< /script> 

Answer 1

Вы можете передать выбранное значение первого select на сторону сервера, запросить базу данных и вернуть результат обратно на сторону клиента, в случае успеха функция обратного вызова ajax для заполнения второго select. Код ниже для вашей справки:

$("#SelectedType").on("change", function () {                
    $.ajax({
        type: 'GET',
        url: "/home/GetTypesBasedOnValueFromOtherDropDownList",
        contentType: 'application/json',
        data: { Type: $("#SelectedType").val() },
        success: function (data) {
            var s = '<option value="-1">Please Select a Course</option>';
            for (var i = 0; i < data.length; i++) {
                s += '<option value="' + data[i].courseCode + '">' + data[i].courseName + '</option>';
            }
            $("#secondSelect").html(s);  
        }
    });
})

Сторона сервера:

public IActionResult GetTypesBasedOnValueFromOtherDropDownList(string Type)
{
    //you can query database instead 
    List<AdmInstCourses> admInstCourses = new List<AdmInstCourses>();
    admInstCourses.Add(new AdmInstCourses() { CourseCode = 1, CourseName = "name1", Units = "3.2" });
    admInstCourses.Add(new AdmInstCourses() { CourseCode = 2, CourseName = "name2", Units = "3.3" });

    return new JsonResult(admInstCourses);
}

Answer 2

        <asp:DropDownList ID="DropDownBox2" runat="server" Width="168px">
            <asp:ListItem Value="%" Text="Option 1"></asp:ListItem>
            <asp:ListItem Value="Option 2"></asp:ListItem>
            <asp:ListItem Value="Option 3"></asp:ListItem>
            <asp:ListItem Value="Option 4"></asp:ListItem>
            <asp:ListItem Value="Option 5"></asp:ListItem>                
            <asp:ListItem Value="Option 6"></asp:ListItem>

in page_load

        if (DropDownList1.Text == "Condition 1")
    {
        DropDownBox2.Items[3].Enabled = false;
        DropDownBox2.Items[4].Enabled = false;
        DropDownBox2.Items[5].Enabled = false;
    }

Это позволит сделать параметры 0,1,2 видимыми только во втором раскрывающемся списке.

Если вам нужно, чтобы это было мгновенно и безpage_load см. этот рабочий пример решения jscript: https://jsfiddle.net/k148pk76/1/