Shortening jQuery 3 way selects (+class toggle)

Question

on a change of first select, second select options are being dynamically changed. How can I shorten it (jQuery or vanilla JS)? It is 3 way street - therefore class toggle is not an option?

$(function () {
 $("#selectBox").on("change", function () {
 if ($("#selectBox").val() === "widget") {
 $("#formSelectColour").removeClass("d-none");
 $('#selectWidget option[value="liveAndAverages"]').addClass("d-none");
 $('#selectWidget option[value="energy"]').removeClass("d-none");
 $('#selectWidget option[value="alerts"]').removeClass("d-none");
 } else {
 $("#selectWidget").val("live");
 $("#formSelectColour").addClass("d-none");
 $('#selectWidget option[value="liveAndAverages"]').removeClass("d-none");
 $('#selectWidget option[value="energy"]').addClass("d-none");
 $('#selectWidget option[value="alerts"]').addClass("d-none");
 }
 });
});

.d-none {
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="formSelectBox" class="form-group">
 <label for="selectBox">Container: </label>
 <select class="form-control" name="selectBox" id="selectBox">
 <option selected value="widget">Widget</option>
 <option value="graph">Graph</option>
 <option value="table">Table</option>
 </select>
 </div>
 <div id="formSelectWidget" class="form-group">
 <label for="selectWidget">Data: </label>
 <select class="form-control" name="selectWidget" id="selectWidget">
 <option value="live">Live</option>
 <option value="alerts">Alerts</option>
 <option value="energy">Energy</option>
 <option class="d-none" value="liveAndAverages">Live and averages</option>
 </select>
 </div>

• 200_success: Please include the formSelectColour element in your demonstration as well, so that the code makes sense.

Answer 1

I usually use toggleClass in these situations. It accepts an add/remove flag something like:

$(function () {
 $("#selectBox").on("change", function () {
 var is_widget = $("#selectBox").val() === "widget"; 
 if (!is_widget)
 $("#selectWidget").val("live");
 $("#formSelectColour").toggleClass("d-none", !is_widget);
 $('#selectWidget option[value="liveAndAverages"]').toggleClass("d-none", !is_widget);
 $('#selectWidget option[value="energy"]').toggleClass("d-none", is_widget);
 $('#selectWidget option[value="alerts"]').toggleClass("d-none");
 });
});