jQuery Cascading 드롭다운리스트 코드 조각

jQuery Cascading 드롭다운리스트 코드 조각입니다.

 

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h1>Cascading 드롭다운리스트</h1>

<h3>Properties</h3>

<select asp-items="ViewBag.PropertyId" id="PropertyId"></select>

<h3>Locations</h3>

<select asp-items="ViewBag.LocationId" id="LocationId"></select>

<h3>Sublocations</h3>

<select asp-items="ViewBag.SublocationId" id="SublocationId"></select>


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>

    $(document).ready(function () {
        // Property에 따른 Location 출력
        $("#PropertyId").change(function() {
            $.getJSON("/api/Locations/Properties/" + $("#PropertyId").val(), function(data) {
                var items = "";
                $("#LocationId").empty(); 
                $.each(data, function(i, location) {
                    items += "<option value='" + location.id + "'>" + location.name + "</option>";
                });
                $("#LocationId").html(items);
            }); 
        });
        // Location에 따른 Sublocation 출력
        $("#LocationId").change(function() {
            $.getJSON("/api/Sublocations/Locations/" + $("#LocationId").val(), function(data) {
                var items = "";
                $("#SublocationId").empty(); 
                $.each(data, function(i, location) {
                    items += "<option value='" + location.id + "'>" + location.sublocationName + "</option>";
                });
                $("#SublocationId").html(items);
            }); 
        });
    });

</script>