表單中的多級下拉列表：Javascript、Bootstrap

Question

我有一個表單，其中名為“Protein Change”的字段具有多級下拉列表，如果用戶單擊下拉列表中的選項（例如，CNV->Deletion），則應選擇該選項並顯示在該字段中。 但是，目前它無法這樣做。

我使用過引導程序和 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>

Answer 1

下拉菜單的行為不像選擇，因此您需要手動更改#dLabel文本。

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

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

這里的完整示例https://jsfiddle.net/pg8wsx16/

表單中的多級下拉列表：Javascript、Bootstrap

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-13 18:39:01

表單中的多級下拉列表：Javascript、Bootstrap

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-13 18:39:01

解決方案1
1 已采納 2020-03-13 18:39:01