0
\$\begingroup\$

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>

\$\endgroup\$
1
  • \$\begingroup\$ Please include the formSelectColour element in your demonstration as well, so that the code makes sense. \$\endgroup\$ Commented Aug 22, 2018 at 17:49

1 Answer 1

2
\$\begingroup\$

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");
    });
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.