-1
\$\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\$
  • \$\begingroup\$ Please include the formSelectColour element in your demonstration as well, so that the code makes sense. \$\endgroup\$ – 200_success Aug 22 '18 at 17:49
1
\$\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, privacy policy and cookie policy

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