Question

我有来自Bootstrap的这个下拉菜单。我有不同的类别，用户可以选择。当他们点击“部门”时按钮并选择一个部门，我想要的部门＆＃39;按钮可以更改为用户选择的任何内容。我附上了下拉列表的HTML。

<form class="navbar-form navbar-left" action="{{ url_for('my_view.product_search') }}" method="GET">
<div class="form-group">   
<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">Department <span class="caret"></span></button>
     <ul class="dropdown-menu">
        <li><a href="#">Laptops</a></li>
        <li><a href="#">Cameras</a></li>
        <li><a href="#">Gaming</a></li>
        <li><a href="#">Networking</a></li>
        <li><a href="#">Tools</a></li>
        <li><a href="#">Headphones</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Miscellaneous</a></li>
        <li><a href="#">Blu-Ray</a></li>
     </ul>
    </div><!-- /Dropdown Button -->
   <input type="text" name="name" class="form-control" placeholder="Search Products...">
  </div><!-- /input-group -->
 <button type="submit" class="btn btn-default">Submit</button>
 </div><!-- /.col-lg-6 -->
 </div>
</form><!-- END SEARCH FUNCTION -->

修改 Here是指向下拉列表的链接

Answer 1

您需要使用javascript。我在<li>标记中的链接添加了一个click事件，在按钮中添加了一个<span>以允许简单的jQuery选择。这里的URL与我的本地测试环境有关。

这是一个有效的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackOverflow Testing...</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>

<form action method="post">
    <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"><span id="button_text">Department</span>&nbsp;<span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a class="select_option" href="#">Laptops</a></li>
                        <li><a class="select_option" href="#">Cameras</a></li>
                        <li><a class="select_option" href="#">Gaming</a></li>
                        <li><a class="select_option" href="#">Networking</a></li>
                        <li><a class="select_option" href="#">Tools</a></li>
                        <li><a class="select_option" href="#">Headphones</a></li>
                        <li><a class="select_option" href="#">Speakers</a></li>
                        <li><a class="select_option" href="#">Miscellaneous</a></li>
                        <li><a class="select_option" href="#">Blu-Ray</a></li>
                    </ul>
                </div><!-- /Dropdown Button -->
            <input type="text" name="name" class="form-control" placeholder="Search Products...">
            </div><!-- /input-group -->
        <button type="submit" class="btn btn-default">Submit</button>
        </div><!-- /.col-lg-6 -->
    </div>
</form>

<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script charset="utf-8" type="text/javascript">
    $('a.select_option').bind('click', function() {
        var selected = $(this).text();
        $('#button_text').text(selected);
    });
</script>
</body>
</html>

具有下拉菜单的Bootstrap＆＃39;按钮＆＃39;

1 个答案: