lopezdp lopezdp - 1 year ago 64
CSS Question

How do I get a selection from a Bootstrap dropdown button to display in the input field?

I am trying to implement a form with Bootstrap that will give the user the option to select different inputs from a drop down menu.

I have used the templates from the BootStrap documentation to write my HTML & I have included the stylesheet, jQuery, & JS dependencies at the top of my HTML file as needed.

I am able to get the individual input groups to display correctly but when the user selects the desired selection from the drop down it does not display in the input field as needed.

Here is the HTML that I have embedded in my JS file:

'<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 -->'


Here are the dependencies that I have included in my tag as required by 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 ***-->


How do I get the selected drop down information to display using the standard Bootstrap implementation? I would like to try to implement it without having to write any special JavaScript functions if possible and if that is how it is supposed to work.

Thanks.

ADD: Here is a sample of the code in CodePen: https://codepen.io/lopezdp/pen/WEvpbR

Answer Source

Here you go with a solution 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download