Question

经过多次搜索，我仍然无法通过Bootstrap下拉切换来实际从下拉列表中选择项目。 Bootstrap网站说包括.show类，但我也没有运气。我在这里看到的许多例子似乎都不适合我。求救！

这是我的代码：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 1

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

如果有实际的网址，您将转到该页面。但我怀疑这不是你想要达到的目标。这看起来更像一个表单，在这种情况下，您可能不希望将.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>

Bootstrap Dropdown不能正常工作

1 个答案: