在视图页面中使用硬编码值填充基于先前选择的另一个下拉列表

Question

我是ASP.net MVC的新手，我试图使用一些硬编码值基于先前选择的下拉列表创建下拉列表。我需要在视图中执行操作，而不是在模型或控制器级别中执行操作。我尝试过但无法实现，请帮忙。

@{
   var salary = new SelectList(
          new List<SelectListItem>
          {
new SelectListItem {Text = "Electrician", Value = "Electrician"},
new SelectListItem {Text = "Guard", Value = "Guard"},
new SelectListItem {Text = "Operator", Value = "Operator"},
          }, "Value", "Text");

    var operations = new SelectList(
            new List<SelectListItem>
            {
new SelectListItem {Text = "Rent", Value = "Rent"},
new SelectListItem {Text = "Charges", Value = "Charges"},
            }, "Value", "Text");
    var maintenance = new SelectList(
            new List<SelectListItem>
            {
new SelectListItem {Text = "option1", Value = "option1"},
new SelectListItem {Text = "option2", Value = "option2"},

            }, "Value", "Text");
    var raw_Material = new SelectList(
           new List<SelectListItem>
           {
new SelectListItem {Text = "option1", Value = "option1"},
new SelectListItem {Text = "option2", Value = "option2"},

           }, "Value", "Text");

}

<div class="row">
    <div class="col">
        <label class="add-reg-label">Cost Head</label>
        @Html.DropDownListFor(model => Model.CostHead,  new List<SelectListItem>
        {
            new SelectListItem{ Text="Salary", Value = "Salary" },
            new SelectListItem{ Text="Operations", Value = "Operations" },
            new SelectListItem{ Text="Maintenance", Value = "Maintenance" },
            new SelectListItem{ Text="Raw Material", Value = "Raw Material" },
         },
         new { @class = "selectpicker" })

    </div>
</div>

<div class="row">
    <div class="col">
        <label class="add-reg-label">Expense Purpose</label>
        @Html.DropDownListFor(model => Model.ExpensePurpose,new List<SelectListItem> { } ,  new { @class = "selectpicker" })

    </div>
</div>

<script type="text/javascript">


    $(document).ready(function () {

        $("#CostHead").change(function () {

            var head = $(this).val();
            alert();

            debugger;
            $.each(@salary, function (index, value) {
            $('#ExpensePurpose').append('<option value="' + value.Value + '">' + value.Text + '</option>');
            });

            });

            });


</script>

每当我选择Costhead下拉菜单时，都希望基于该选择填充费用目的下拉列表。怎么做