我正在尝试使用Bootstrap实现一个表单，该表单将为用户提供从下拉菜单中选择不同输入的选项。
我使用了Bootstrap文档中的模板来编写我的HTML＆amp;我已经包含了样式表，jQuery和＆amp;根据需要，我的HTML文件顶部的JS依赖项。
我能够正确显示各个输入组，但是当用户从下拉列表中选择所需的选项时，它不会根据需要显示在输入字段中。
以下是我在JS文件中嵌入的HTML：
'<div class="col-lg-6">' +
'<div class="input-group">' +
'<div class="input-group-btn">' +
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Issue Type<span class="caret"></span></button>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Logic Error</a></li>' +
'<li><a href="#">Improper Display</a></li>' +
'<li><a href="#">System Crash</a></li>' +
'<li role="separator" class="divider"></li>' +
'<li><a href="#">Feature Request</a></li>' +
'</ul>' +
'</div><!-- /btn-group -->' +
'<input type="text" class="form-control" placeholder="Select Issue Type" aria-label="Text input with dropdown button">' +
'</div><!-- /input-group -->' +
'</div><!-- /.col-lg-6 -->'
以下是Bootstrap所需的我在标记中包含的依赖项：
<title>Bug Tracking</title>
<!-- Bootstrap & Core CSS (DPL) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> -->
<link rel="stylesheet" href="/orion/ccdd.css">
<!-- Bootstrap, Custom, & Core jQuery Plugins DPL -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- NEW ***-->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <!-- NEW -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> <!-- NEW -->
<script type="text/javascript" charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- NEW -->
<script type="text/javascript" charset="utf8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- NEW ***-->
如何使用标准Bootstrap实现显示所选的下拉信息？我想尝试实现它，而不必编写任何特殊的JavaScript函数，如果可能的话，如果它应该如何工作。
ADD：以下是CodePen中的代码示例：https://codepen.io/lopezdp/pen/WEvpbR
答案 0 :(得分：2)
您可以使用解决方案https://jsfiddle.net/4Lqqu2s7/1/
createBugForm = function() {
$("div.create").append(
`<form class="bug-form">
<div class="page-header">
<h1>Bug Tracking Database <small>Coming Soon!</small></h1>
</div>
<div class="container-fluid"><div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Issue Title</span>
<input type="text" class="form-control" placeholder="Title of Issue Discovered" aria-describedby="basic-addon1">
</div>
</div>
<br>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Tracking ID#</span>
<input type="text" class="form-control" placeholder="Tracking Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opened By<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">David Swartwout</a></li>
<li><a href="#">Robert Hirsh</a></li>
<li><a href="#">Kevin McCluney</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Add User</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Select User" aria-label="Text input with dropdown button">
</div>
</div
<br>
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Issue Type<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Logic Error</a></li>
<li><a href="#">Improper Display</a></li>
<li><a href="#">System Crash</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Feature Request</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Select Issue Type" aria-label="Text input with dropdown button">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Priority<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Low</a></li>
<li><a href="#">Medium</a></li>
<li><a href="#">High</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Mission Critical</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Select Priority" aria-label="Text input with dropdown button">
</div>
</div>
<br>
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Status<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Not Started</a></li>
<li><a href="#">In Progress</a></li>
<li><a href="#">Complete</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Status" aria-label="Text input with dropdown button">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="10" id="comment"></textarea>
</div>
</form>`
);
$('#datetimepicker1').datetimepicker();
}
$(document).on('click', '.dropdown-menu li', function(){
$(this).parent().parent().next().val($(this).text());
});
createBugForm();.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
float: left;
}
#nav_bar {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
border: 0;
background-color: #80bfff;
border-radius: 0px;
margin-bottom: 0;
}
/* Set Main Table Horizontal Scroll - DPL */
/*Deprecated when scroll set to inner table rows - DPL*/
.panel-group {
width: 100%;
}
.container {
width: 100%;
}
.search_bar {
position: fixed;
width: 100%;
border: 0;
background-color: #fffacd;
border-radius: 0px;
margin-bottom: 0;
}
.user_bar {
width: 100%;
height:100%;
border: 0;
background-color: #1E90FF;
border-radius: 0px;
margin-bottom: 0;
clear: both;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
margin-bottom: 4px;
text-align: center;
padding: 0 15.5px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
.l, .l:hover, .l:active, .l:visited {
color: #FFFFFF;
}
.md {
padding: 40px;
}
/* This is CSS for img in README.md - DPL*/
img[src$="centerme"]{
display: block;
margin:0 auto;
}
/* This is CSS class for img in html logo - DPL*/
.image {
width:275px;
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
border: 2;
}
.tfclear{
clear:both;
}
.bug-form {
padding: 60px;
}
ul {
list-style: none;
width:100%;
padding-right: 20px;
}
button {
cursor: pointer;
}
table {
border-bottom: 1px solid black;
border-collapse: separate;
border-spacing: 0 5px;
clear:both;
}
thead tr th {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-collapse: separate;
border-spacing: 10px 5px;
cursor: pointer;
}
td {
min-width: 80px;
}
.wrapword{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
tr:hover {
background-color: #f5f5f5;
}
tbody {
border-left: 1px solid black;
border-right: 1px solid black;
}
h2 {
border-bottom: 1px solid black;
}
table {
}
li.dir {
border: 1px solid #d9d9d9;
border-collapse: collapse;
border-left-style: dotted solid;
padding: 10px;
width: 100%;
/* This overrides scoll on main table in .panel-group - DPL*/
overflow: auto; /* Enable scroll when Page size Shrinks - DPL */
}
li.dir:hover {
text-decoration: bold;
cursor: pointer;
color: #1E90FF;
}
li.dir:focus {
color: green;
width: 100%;
}
li.dir span {
color: black;
cursor: auto;
-webkit-box-sizing: border-box ;
-moz-box-sizing: border-box ;
box-sizing: border-box ;
width: 100%;
}
table, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
.divider{
width:15px;
text-align: right;
height:auto;
display:inline-block;
}
#tfheader{
background-color:#e6f2ff
}
#tfnewsearch{
float:right;
padding:30px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
/* Adding CSS for Refresh Button at nav Bar - DPL */
.refreshBtn {
margin: 10;
padding: 4px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
margin-left: 5px;
margin-right: 5px;
border: 1px solid #0076a3;
background: #696969
}
.refreshBtn:hover {
text-decoration: none;
background: #0080ff;
}
.tfbutton {
margin: 10;
padding: 4px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
margin-left: 5px;
margin-right: 5px;
border: 1px solid #0076a3;
background: #696969
}
.tfbutton:hover {
text-decoration: none;
background: #0080ff;
}
.tfbuttonsearch {
background-image: url(/search.png);
margin: 10;
padding: 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:29px;
outline: none;
cursor: pointer;
color: #ffffff;
margin-left: 5px;
margin-right: 5px;
border: none;
background: transparent;
}
.tfbuttonsearch:hover {
text-decoration: none;
}
.tfbuttonnext {
margin: 10;
padding: 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:25px;
outline: none;
cursor: pointer;
font-color: black;
margin-left: 5px;
margin-right: 5px;
border: none;
background: transparent;
}
.tfbuttonnext:hover {
text-decoration: bold;
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
width: 100%; /* Full width */
height: 100%; /* Full height */
/*Deprecated by overflow in .modal-content*/
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
text-align: center;
border: 1px solid #888;
width: 20%;
overflow: auto; /* Enable scroll if needed */
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 38px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.material-icons {
top: 0.5em;
}
.xButton{
background-color: transparent;
text-decoration: bold;
border: none;
font-size: 18px;
}
.userButton{
background-color: transparent;
text-decoration: bold;
border: none;
font-size: 18px;
color: white;
float: right;
}
.menuButton{
background-color: transparent;
text-decoration: bold;
border: none;
font-size: 18px;
color: white;
float: right;
padding-right: 20px;
}
.userButton:hover{
color: #696969;
background-color: white;
border: 0px solid #1E90FF;
}
input[type=logintext], input[type=password] {
width: 500px;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button.login {
background-color: #696969;
color: white;
padding: 10px 18px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 500px;
}
button.login:hover {
color: #696969;
background-color: transparent;
border: 3px solid #80bfff;
}
div.login {
width: 900px;
height: 500px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="create">
</div>
更新了库
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>