In Swashbuckle / Swagger; How do I hide a dropdown menu based on anothers selected value

Question

I'm struggeling with this functionality of hiding a row based on a select:

<tr data-param-name="nodeGroup">

in web api, Program.cs:

app.UseSwaggerUI(options => {          
        options.InjectJavascript("/custom.js");
    });

The javascript custom.js:

var providerSelect = null;
var nodeGroup = null;

document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
        // document ready
        providerSelect = document.querySelector("[data-param-name='provider'] select");
        nodeGroup = document.querySelector("[data-param-name='nodeGroup']");

        if (providerSelect) {   
            providerSelect.addEventListener("change", function () {
                var text = providerSelect.options[providerSelect.selectedIndex].text;

                if (text == "EcoPlatform") {
                    nodeGroup.setAttribute("visibility", "visible");
                }
                else {
                    nodeGroup.setAttribute("visibility", "collapse");
                }
            });
        }
    }
};

The above does not work.

• The page is not actually shown on readystate === 'complete'
• providerSelect does not get populated before I click the downarrow on the "accordion". <noscript> is replaced on click.

Answer 1

Was solved like this:

document.addEventListener("change", function (event) {
var providerSelect = document.querySelector("[data-param-name='provider'] select");


if (event.target == providerSelect) {

    var nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
    var selectedText = providerSelect.options[providerSelect.selectedIndex].text;

    var dataset = document.querySelector("[data-param-name='datasetType']");

    if (selectedText == "EcoPlatform") {
        nodeGroup.style["visibility"] = "visible";
        dataset.style["visibility"] = "visible";
    }
    else {
        nodeGroup.style["visibility"] = "collapse";
        dataset.style["visibility"] = "collapse";
    }
}
});