Bootstrap Dropdown Not Working Still
Question
After much searching, I am still having trouble getting the Bootstrap dropdown to toggle and actually select items from the dropdown. The Bootstrap site says to include the .show class, but I have not had any luck with this either. Many of the examples I see here do not seem to work for me. Help, please!
This is my code:
body { margin: 0; padding: 0; } .jumbotron { text-align: center; width: 100%; height: auto; } h2 { font-size: 1.7em; margin-bottom: .8em; } .question { margin-top: 2em; padding-right: 6em; padding-left: 6em; } .buttonContainer { margin: 3em; text-align: center; } .button { background-color: red; }
<!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="public/main.css"> </head> <body> <div class="jumbotron"> <h1 id="header"> Post-Surgery Survey </h1> </div> <div class="container question"> <h2>What kind of surgery did you have?</h2> <div class="dropdown surgeryType"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Hip Replacement</a></li> <li><a class="dropdown-item" href="#">Knee Replacement</a></li> </ul> </div> </div> <div class="container question"> <h2>How old are you?</h2> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Under 50</a></li> <li><a href="#">50-65</a></li> <li><a href="#">66-80</a></li> <li><a href="#">Over 80</a></li> </ul> </div> </div> <div class="container question"> <h2>What kind of medication were you given?</h2> <div class="checkbox"> <label><input type="checkbox" value="">Tylenol</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">Celebrex</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">Oxycodone</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">Oxycotin</label> </div> </div> <div class="container question"> <h2>Do you feel you were given enough medication?</h2> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Too much</a></li> <li><a href="#">Just right</a></li> <li><a href="#">Not enough</a></li> </ul> </div> </div> <div class="container question"> <h2>How well was your pain controlled on a scale of 1-10?</h2> <p>1 being the most pain, 10 being the least.</p> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul> </div> </div> <div class="container question"> <h2>Were you satisfied with your pain control?</h2> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Yes</a></li> <li><a href="#">No</a></li> </ul> </div> </div> <div class="container"> <div class="buttonContainer"> <button type="button" class="btn btn-primary btn-lg submit">Submit</button> </div> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2018-04-30 15:14:53
It depends on what you're trying to do. Right now all your hrefs are merely anchor tags. They don't go anywhere. <li><a href="#">Under 50</a></li> , for example. When you select an option in a dropdown, note how the page jumps a bit? That's the anchor tag being selected jumping you to the top of the same page.
If there was an actual URL, you'd go to that page. I suspect that's not what you're trying to achieve, though. This looks more like a form, in which case you probably don't want .dropdown-toggle or data-toggle="dropdown" assigned to buttons. You'd want a simple select element, no?
<select class="form-control" id="some-id">
<option>Select an option</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.