Multiple bootstrap dropdown-menu

by Roman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class=" well col-lg-12">
      <h2 style="margin-top: 0px;" class="h2-section-title">
        Zoek immo
      </h2>
      <div style="width:90%" class="section-subscribe">
        <form role="form" class="form-inline" method="get" id="searchForm" action="/realty/">
          <div class="row form-row-class">
            <div id="searchContainer-inner">
              <div class="select price col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <div class="price-button btn-group bootstrap-select">
                  <button style="height: 40px; margin: 0px 10px 10px 0; width: 140px;" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" title="PRIJS" type="button" class="btn btn-blue-light dropdown-toggle price-toggle"> <span class="price-label">
                      <span id="emptyLabel">PRIJS</span>
                      <span id="chLabel" style="display:none">
                          <span id="minVal">...</span>
                          -
                          <span id="maxVal">...</span>
                      </span>
                      </span>
                   <span class="caret"></span>
                  </button>
                  <div role="menu" class="dropdown-menu dropdown-blue-light">
                    <!-- dropdown menu links -->
                    <label>Min.</label>
                    <div class="price-min">
                      <div class="combobox">
                        <div class="input-group input-group-sm">    <span class="input-group-addon">€</span>

                          <input type="text" title="" data-original-title="" placeholder="Typ of selecteer..." class="form-control" data-label="minVal">
                          <div class="input-group-btn">
                 ...

CSS

@import'http://bot.immo/static/css/style.css';
 @import'http://bot.immo//static/css/skins/oil.css';
 body {
    overflow: visible;
}
.combo-options {
    position: relative;
}
.decimal {
    width: 80px;
}
.status-selector button.btn-lg, .status-selector .btn-lg {
    padding: 0 15px !important;
}
.btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info {
    background: #e6e6e6 !important;
}
.form-row-class .status-selector label.btn {
    margin: 0;
    text-align: center;
}
.status-selector label.btn {
    margin: 10px 0;
    text-align: center;
}
.section-subscribe input[type="text"] {
    width: 100% !important;
}
.price-sort-form > div {
    padding: 0 !important;
}
.price-sort-form {
    padding-top: 15px;
}
.section-subscribe .price-sort-form > div input {
    background-color: white;
    border: 1px solid lightgray;
    height: 30px;
    padding: 0 4px;
}
.search-selects .price-button.bootstrap-select.open > .dropdown-menu {
    animation: 0.4s ease 0s normal forwards 1 running dropdown-animation;
    padding-top: 5px;
    transform: translateZ(1029px);
    transform-origin: 50% 0 0;
    transform-style: preserve-3d;
}
.select .bootstrap-select.btn-group {
    margin-bottom: 0;
}
.dropdown-menu {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 14px;
    left: 0;
    list-style: outside none none;
    margin: 2px 0 0;
    min-width: 200px;
    padding: 5px 0;
    position: absolute;
    text-align: left;
    top: 100%;
    z-index: 1000;
}
.input-group-sm > .input-group-btn > .btn {
    border-radius: 3px;
    font-size: 12px;
    height: 30px;
    line-height: 1.5;
    margin-top: 0;
    padding: 5px 10px;
    margin-bottom: 0;
}
.input-group-addon, .input-group-btn {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
.status-selector.btn-group...

JavaScript

$('.bootstrap-select > .dropdown-menu').on('click', function (e) {
    e.stopPropagation();
});

$('.dropdown-menu .combobox').each(function () {
    var $this = $(this),
        $toggler = $this.find('[data-toggle="dropdown"]'),
        $comboOptions = $this.find('.combo-options'),
        $valueBlock = $this.find('input[type="text"]'),
        $spanID = $valueBlock.data('label');
        $parentDropdownMenu = $this.closest('.dropdown-menu');
    
    function close() {
        $comboOptions.removeClass('open');
        $parentDropdownMenu.off('click', close); 
    }

    function toggle(e) {
        if ($comboOptions.hasClass('open')) {
            close();
        } else {
            $comboOptions.addClass('open');
            $parentDropdownMenu.on('click', close);
        }
        
        e.stopPropagation();
    }

    $comboOptions.on('click', '.dropdown-menu a', function (e) {
        $('#emptyLabel').hide();
        $('#chLabel').show();
        $('#'+$spanID).text( this.dataset.value||'...' );
        $valueBlock.val(this.dataset.value);
        close();
    });

    $toggler.on('click', toggle);
});

// В стилях не забыть
/*
.combo-options {
    position: relative;
}
*/