使用jQuery ajax在mvc剃须刀中过滤下拉列表

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 在这里编写相关代码
    });
</script>

<select id="filterSelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <!-- 其他选项 -->
</select>

[HttpPost]
public ActionResult FilterDropDownList(int selectedValue)
{
    // 根据 selectedValue 进行过滤逻辑
    // 获取过滤后的选项列表 filteredOptions
    
    return Json(filteredOptions, JsonRequestBehavior.AllowGet);
}

$(document).ready(function() {
    $('#filterSelect').change(function() {
        var selectedValue = $(this).val();

        $.ajax({
            url: '/Controller/FilterDropDownList',
            type: 'POST',
            data: { selectedValue: selectedValue },
            success: function(filteredOptions) {
                // 清空原有选项
                $('#filterSelect option').remove();
                
                // 添加过滤后的选项
                $.each(filteredOptions, function(index, option) {
                    $('#filterSelect').append($('<option>', {
                        value: option.value,
                        text: option.text
                    }));
                });
            }
        });
    });
});