如何通过select的当前值更改背景颜色？

Question

Using asp-core net 2.2 mvc, I would like to change the background color of div tag by the current value of select

I have defined the following select in a view:

<div id="bgcolor" class="form-group">
  <label asp-for="BackGround" class="control-label"></label>
    <select asp-for="BackGround" asp-items="Html.GetEnumSelectList<BackGroundColor>()" onchange="changeBackground">
      <option selected="selected" value="">Please select</option>
    </select>
</div>

Then I added the script:

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
    function changeBackground(value) {
        $("#bgcolor").removeClass("bg-primary bg-secondary bg-warning").addClass(value)
    };
</script>
}

The enum has the following values

public enum BackGroundColor
{
    bg-primary,
    bg-secondary,
    bg-success,
    bg-danger,
    bg-warning,
}

I am not even sure if the script is loaded. Could you please indicate the correct way?

Answer 1

 <select asp-for="BackGround" asp-items="Html.GetEnumSelectList<BackGroundColor>()" onchange="changeBackground(this)">

 function changeBackground(data) { //put this data.value where ever you want alert(data.value); } 

  $("#bgcolor").removeClass("bg-primary bg-secondary bg-warning").addClass(data.value); 

please try.