Bootstrap 'Buttons with Dropdowns'

У меня есть это выпадающее меню из Bootstrap. У меня разные категории, которые пользователь может выбрать. Когда они нажимают кнопку «Департамент» и выбирают отдел, я бы хотел, чтобы кнопка «Департамент» изменилась на все, что было выбрано пользователем. Я приложил HTML для выпадающего списка.Bootstrap 'Buttons with Dropdowns'

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

EDIT Here является ссылка на то, что выпадающий выглядит

источник

2016-11-26 kstullich

вы можете/вы хотите использовать Javascript или JQuery? извините, не знаю много о python, поэтому не уверен, что это возможно ... – webeno

@webeno конечно, если бы мне пришлось выбирать, я хотел бы использовать Javascript. (если jQuery проще/эффективнее). Я использую фреймворк, поэтому я могу реализовать JS в нем. – kstullich

Вы должны использовать JavaScript. Я добавил событие click для ссылок в теге <li> и <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>

источник

2016-11-26 21:02:27 abigperson

Спасибо! Это работает! – kstullich

Без проблем, рад, что я мог бы помочь! – abigperson

Bootstrap 'Buttons with Dropdowns'

ответ

Смежные вопросы