引导下拉菜单仍然无法正常工作答案

【问题标题】：Bootstrap Dropdown Not Working Still引导下拉菜单仍然无法正常工作
【发布时间】：2018-04-30 14:45:58
【问题描述】：

经过大量搜索，我仍然无法让 Bootstrap 下拉菜单切换并实际从下拉菜单中选择项目。 Bootstrap 网站说要包含 .show 类，但我对此也没有任何运气。我在这里看到的许多示例似乎对我不起作用。请帮忙！

这是我的代码：

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>

【问题讨论】：

所以当你选择下拉选项时，它什么都不做？

标签： html twitter-bootstrap dropdown

【解决方案1】：

这取决于你想要做什么。现在你所有的hrefs只是锚标签。他们哪儿也不去。 <li><a href="#">Under 50</a></li>，例如。当您在下拉列表中选择一个选项时，请注意页面如何跳转？这就是选择的锚标记将您跳到同一页面的顶部。

如果有实际的 URL，您会转到该页面。不过，我怀疑这不是您想要实现的目标。这看起来更像一个表单，在这种情况下，您可能不希望将.dropdown-toggle 或data-toggle="dropdown" 分配给按钮。你想要一个简单的选择元素，不是吗？

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

【讨论】：

感谢您的回复！是的，我不想转到 URL，我想要一个简单的选择元素。
没问题，很高兴听到！如果这样可以解决问题，您能否将答案标记为已接受？