时间戳

首页 > 解决方案 > 表单中的多级下拉菜单：Javascript、Bootstrap

javascript - 表单中的多级下拉菜单：Javascript、Bootstrap

问题描述

我有一个表单，其中名为“Protein Change”的字段具有多级下拉菜单，如果用户单击下拉菜单中的选项（例如，CNV-> 删除），则应选择该选项并显示在该字段中。但是，目前它无法这样做。

我使用过引导程序和 Javascript。我可以使用 onclickevent() 来发生点击事件并显示与之对应的数据吗？

 $(".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

解决方案

下拉菜单的行为与选择不同，因此您需要手动更改#dLabel.

在 jQuery 中，您可以执行以下操作：

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

此处的完整示例https://jsfiddle.net/pg8wsx16/

推荐阅读