Is there a way to conceal a dropdown menu in Swashbuckle/Swagger based on another selected value?

I'm facing a challenge with the feature that involves hiding a row based on a selection:

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

within web api, Program.cs:

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

The custom javascript file (custom.js):

var providerSelect = null;
var nodeGroup = null;

document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
        // document is 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 aforementioned approach does not appear to be functioning as intended.

  • The page does not display correctly when the readystate is 'complete'
  • The providerSelect element is not filled prior to clicking the drop-down arrow on the "accordion". The <noscript> tag is replaced upon click.

https://i.sstatic.net/1QMah.png

Answer №1

This was the solution:

const selectElement = document.querySelector('select');
selectElement.addEventListener('change', function (event) {
  const result = document.getElementById('result');
  const selectedValue = event.target.value;
  
  if(selectedValue === 'Option A') {
    result.textContent = 'You selected Option A';
  } else if(selectedValue === 'Option B') {
    result.textContent = 'You chose Option B';
  } else {
    result.textContent = 'No option selected';
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on updating data within a file at a specific position using JavaScript

I am faced with a challenge involving a file containing the following data, Test.txt, <template class="get" type="amp-mustache"> <div class="divcenter"> /////Need to append data at this point///// </div> </template> ...

I'm looking to use node.js to post an image on my blog

I am currently in the process of setting up a new blog using node.js. Everything is working smoothly on my local setup, but I am facing an issue when it comes to adding images to my articles. Despite utilizing bootstrap for input display, I am unable to sa ...

Utilizing React with file system and path dependent packages

Is there a way to utilize the quick.db package in my ReactAPP with hooks, even though React does not allow the use of FS & Path which are required for this package? I am encountering the following errors: ERROR in ./node_modules/file-uri-to-path/index.js ...

Steps to resolve: The remote server has encountered an issue and returned an error code of (400) Bad Request

I'm currently troubleshooting an error and I've noticed similar questions with the same issue, but the line request.ContentLength = 0; isn't resolving my exception. Here is the code snippet for my image: public ActionResult Index() { ...

Employ the responseText property of $.ajax() to assign the data to a variable in JavaScript

Despite encountering numerous questions related to my issue, I have been unable to find a suitable answer. In an external JS file, I need the value of a session variable (view_mode) which can be either "complex" or "simple". My goal is to determine which ...

Discovering HTML attributes using part of the attribute's name

Can someone help me identify and remove all attributes in my HTML page that contain the word "data"? I want to clear out the values for these attributes. Any suggestions on how to achieve this? For instance, consider the following snippet from my HTML: & ...

Axios fails to input data into the table

Having trouble with my axios request to insert.php. The variable note_text is coming back as null. I suspect it's because I'm not properly specifying the 2nd argument. My assumption was that there would be a variable like $ _POST['note_text ...

JavaScript code that only runs during the initial iteration of a loop

I am facing an issue while trying to develop a stopwatch for multiple users using PHP and JavaScript, with MySQL database for user data storage. The problem is that the stopwatch starts when I click on one user but does not work for others. I have attempte ...

Retrieve form data from Vuex state to make edits

I recently completed a tutorial on Vue to enhance my skills, and I'm now facing an issue while trying to make some changes. The tutorial I followed can be found here. Specifically, I have a "settings" page where users can edit their profile details. ...

Using Formik with MUI Multiple Select

Exploring the world of MUI and Formik, I encountered a challenge with creating a multiple Select in my form. It's my first time working with these tools, so I have a question regarding the implementation. Here's what I've tried based on the ...

PointerLockControls maintains a constant speed without slowing down (threejs)

I have integrated THREE.PointerLockControls into my project following the implementation demonstrated in this example (view code). The code seems to be accurately translated from the example, but I am facing issues with deceleration of the controller once ...

Ensure modifications to a variable are restricted within an if statement

I am struggling to find a way to globally change a variable within an if statement and ensure that the modifications persist. User input: !modify Bye var X = "Hello" if (msg.content.includes ('!modify')) { X = msg.content.replace('!modi ...

Guide to transferring array information from one Vuejs route to another

I'm facing an issue with passing an array from one Vuejs route to another. Specifically, I need to pass the array from home.vue to post.vue. In my route.js file for post.vue, I have: { path: '/post/:cart', name: 'post', com ...

JavaScript error message stating that the setAttribute function is null

As a newcomer to JS, I am currently working on creating a task list webpage that allows users to submit projects and create task lists within each project with designated due dates. In order to generate unique ID tags for projects and tasks, I utilized UU ...

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

Discovering the summation of chosen options multiplied by input fields with the assistance of jQuery

I am attempting to calculate the average for different subjects and print it immediately whenever the user modifies a value. To input the marks, I am using input fields and corresponding select options for the hours allotted to each subject. I can accura ...

When the CSS class of a DIV is set to X in jQuery, the script will hide all other DIVs with a

Just starting to explore jQuery and still fresh on JS knowledge, I have the desire to craft a jQuery script. To begin with, here is my HTML snippet: <div id="user-controls"> <div class="choice" id="choice-all" onclick="showAll();">All< ...

Update the network name in the Axios request

Currently, I am utilizing Axios for handling both GET and POST requests. One question that has been on my mind is how to modify the network name: At present, the name serves as the parameter accompanying each request. However, I ponder whether it's f ...

Is it possible to use the identical change function on numerous div elements?

How can functions be bound to multiple div elements effectively? $('#trigger1').change(function(){ // implement the code }); $('#trigger3').change(function(){ // execute the same code }); ...

Tips for creating Firestore rules for a one-on-one messaging application

After creating a one to one chat app for a website using Firebase and Firestore, I am now looking to set up the Firebase Firestore rules for the same. The functionality of the app involves checking if the user is [email protected], then retrieving chatids ...