Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this functionality is not working as expected.

I have implemented Bootstrap and JavaScript for this task. Can I utilize the onclickevent() function to trigger the necessary action upon clicking and displaying the corresponding data?

 $(".btn-group, .dropdown").hover(
        function () {
            $('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
            $(this).addClass('open');
        },
        function () {
            $('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
            $(this).removeClass('open');
        });
.dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu > a:after {
            content: ">";
            float: right;
        }

        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: 0px;
            margin-left: 0px;
        }

        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script language="JavaScript" src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

<link href="css/dialog.css" rel="stylesheet" media="screen" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid" style="padding-left: 20px;">
    <form class="form-inline">
        <fieldset disabled>
            <div class="form-row">
                <select class="fields inputstl form-control form-control col-md-12" onchange="changevar(this,event);">
                    <option selected="selected">TumorType</option>
                </select>
            </div>
        </fieldset>

        <div class="form-row">
            <select id="selecttumor" required class="values inputstl form-control mx-sm-3" value="Bladder Urothelial Carcinoma" type="search" style="width: 200px;">
                <option value="4">Bladder Urothelial Carcinoma</option>
                <option value="5">Breast invasive carcinoma</option>
                <option value="6">Colon adenocarcinoma and Rectum adenocarcinoma</option>
            </select>
        </div>
        <fieldset disabled>
            <div class="form-row">
                <select class="fields inputstl form-control form-control col-md-12" onchange="changevar(this,event);">
                    <option selected="selected">Gene</option>
                </select>
            </div>
        </fieldset>

        <div class="form-row">
            <input id="selectGene" value="AGXT" onfocus="addSysnomousInput(this,event);" required class="values inputstl form-control mx-sm-3" type="search">
            <span id="selectGene" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
        </div>

        <div class="form-row">
            <div class="col-lg-12">
                <div class="btn-group">
                    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-outline-secondary dropdown-toggle"
                       href="">
                        Protien Search
                    </a>
                    <ul class="selectPkeyVkey dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                        <li value ="1"><a class="dropdown-item">Protein Search</a></li>
                        <li value="2"><a class="dropdown-item">Nucleotide Search</a></li>
                        <li><a class="dropdown-item">Group Variants</a></li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-submenu">
                            <a class="dropdown-item" tabindex="-1" href="#">
                                CNV
                            </a>
                            <ul class="dropdown-menu">
                                <li value="3"><a class="dropdown-item" tabindex="-1">Copy Number Gain</a></li>
                                <li value="3"><a class="dropdown-item">Copy Number Loss</a></li>
                                <li value ="3"><a class="dropdown-item">Deletion</a></li>
                                <li value ="3"><a class="dropdown-item">Diplotype</a></li>
                                <li value ="3"><a class="dropdown-item">Distinct Chromosome</a></li>
                                <li value ="3"><a class="dropdown-item">Duplication</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <fieldset disabled>
            <div class="form-row">
                <select class="fields inputstl form-control form-control col-md-12" onchange="changevar(this,event);" style="margin:15px;">
                    <option selected="selected">Variant</option>
                </select>
            </div>
        </fieldset>
        <div class="form-row" style="margin: 10px">
            <input id="selectVarinput" value="Gly170Arg" onfocus="addSysnomousInput(this,event);" required class="form-control mx-sm-3" type="search">
            <span id="selectVarinput" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
        </div>


        <button id="searchButton" class="searchclass btn btn-primary mx-sm-3" onclick="collectLogic(this,event);return false;">Search</button>
    </form>
</div>


</body>
</html>

javascripthtmlcss

Answer №1

The drop-down menu is not functioning like a select element, so you will need to manually update the text of #dLabel.

Using jQuery, you can achieve this with the following code:

$(".dropdown-item").click(function() {
  let newText = $(this).text();
  $("#dLabel").text(newText);
});

For a complete example, check out https://jsfiddle.net/9q4xa15c/

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

Adjust the transparency of a `<ul>` element as it descends on the webpage - CSS3

I have a list (<ul>) that I would like to fade out as it scrolls down the page. I attempted to use linear-gradient, but I was unsuccessful. Is this even possible? You can view an example of what I am trying to achieve on JSFiddle here: http://jsfidd ...

cssopacity

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

javascriptjqueryhtmlcsssettimeout

Instructions for sending an array of integers as an argument from JavaScript to Python

I have a JavaScript function that extracts the values of multiple checkboxes and stores them in an array: var selectedValues = $('.item:checked').map(function(){return parseInt($(this).attr('name'));}).get(); My goal is to pass this a ...

javascriptjquerypythonajax

Learning how to interpret and implement this particular syntax within JavaScript Redux Middleware can be a valuable skill

Currently, I am diving into the world of redux middleware by referring to this informative article: http://redux.js.org/docs/advanced/Middleware.html The code snippet presented below serves as an illustration of how a logging middleware works. const log ...

javascriptreactjsecmascript-6redux

Using Vue.js to pass a variable from a parent component to a child component

Parent component: ShowComment Child component: EditComment I'm attempting to pass the value stored in this.CommentRecID to the child component. In the template of ShowComment, I have included: <EditComment CommentRecID="this.CommentRecID" v-if= ...

javascriptjqueryvue.jsvue-props

In order to utilize Next.js with pkg, you must enable one of the specified parser plugins: 'flow' or 'typescript'

Utilizing next.js with the pkg in my project, following the steps outlined in this tutorial, I encountered an error when running the pkg command: > Error! This experimental syntax requires enabling one of the following parser plugin(s): 'flow, t ...

javascriptnode.jsdockerfilenext.jszeit-pkg

Using jQuery each, the output is an undefined Object or HTMLElement

Using jQuery's each/getJSON to iterate through a data.json file, collect and format the data, and display it on the page within the #output div. The functionality is working correctly, except for the unexpected addition of [object HTMLElement] that a ...

javascriptjqueryjsonparsinggetjson

showcasing a picture retrieved from an express server

Struggling to incorporate an image from an api into an img tag, unsure of the data type and how to process it for display. The data remains consistent regardless of using pipe() or res.sendFile(). Witness the server in action: app.get('/image', ...

htmlimageexpressbinaryblob

Having a fixed footer in JQuery mobile does not adjust its position downwards as intended

I attempted to move the footer down using the provided code below, but it doesn't seem to be working. I even went ahead and removed all standard text from the CSS file to eliminate any potential issues. It should normally shift downward with <div ...

jqueryhtmlcssmobile

Toggle the JavaScript on/off switch

I am attempting to create a toggle switch using Javascript, but I am encountering an issue. Regardless of the class change, the click event always triggers on my initial class. Even though my HTML seems to be updating correctly in Firebug, I consistently ...

javascriptajaxjquery

I'm experiencing an issue where the video from my server is not being displayed within the <video> tag in the browser, but when using the web URL, the video plays

When it comes to uploading a video, there are two options available: 1) Provide the web URL for the video, 2) Upload the actual video file. The <video> tag works smoothly with a web URL as the source, but issues may arise when trying to play an uplo ...

javahtmlweb-servicesmime-typeswildfly-9

Spacing Problem with Title Tooltips

After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...

javascripthtmlangulartypescript

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Styling for different screen sizes: @media (min-width: 991px) and (max-width:768px){} .container, .container1, .container2 .container3{ float: left; } .container1{ width: 50%; } .container2{ width: 50%; } .container3{ width: 100%; } /**** ...

htmlcssmedia-queries

Creating a design with multiple `<thead>` and `<tbody>` elements

Seeking advice on usability and design elements. I am currently utilizing JQuery to hide/show entire sections within a single large table structure. The layout consists of multiple thead sections, with the main header at the top, followed by sub-headers fo ...

jqueryhtml

"User-friendly Material-UI input field paired with a clear label

Seeking guidance on creating a text field with a label using the material-ui library. I am searching for something similar to this example: https://github.com/callemall/material-ui/blob/master/src/TextField/TextFieldLabel.jsx Unfortunately, I have been ...

javascriptreactjsmaterial-ui

Trouble with pinch zoom functionality in a Vue component

I have a Vue component that allows me to zoom in on an image using the mouse wheel, but I'm experiencing strange behavior with pinch zoom. When I place two fingers far apart on the screen, it zooms in significantly, and when I bring them closer togeth ...

javascriptvue.js

What steps should I take to ensure that the array yields the correct output?

Why is my code not creating an array of [0, 1, 2] when I pass the number 3 as a parameter? const array = [0]; const increment = (num) => { if (num > 0) { increment(num - 1); array.push(num); } return; }; console.log(array); incremen ...

javascript

Dealing with Ajax errors in Django reponses

My code includes an ajax call to a Django view method: $("#formi").submit(function(event){ event.preventDefault(); var data = new FormData($('form').get(0)); $.ajax({ type:"POST", url ...

javascriptjquerypythonajaxdjango

Having trouble receiving a complete response when making an ajax request to fetch an entire webpage

Currently, I am experimenting with J-Query Ajax functionality. My goal is to send a request in order to retrieve the entire HTML data of a page that I have hosted on bitbaysolutions.com. The issue arises when I load this URL and execute document.getElement ...

javascriptjqueryhtmlajaxgoogle-chrome-extension

Convert the JSON data received from a jQuery AJAX call into a visually appealing HTML table

Utilizing AJAX as the action, I have created a search form. In the success of the AJAX request, I am seeking a way to update a specific div without refreshing the entire page. Below is my form: <?php $properties = array('id' => &ap ...

javascriptjqueryajaxjsoncodeigniter