下拉菜单的 Bootstrap 所选项目值

Question

I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here .

As you can see I have customised the dropdown menu's slightly within the CSS.

HTML:

        <!-- City Dropdown -->
        <div class="btn-group">                       
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Select City <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
          <li><a href="#">All</a></li>
          <li class="dropdown-header">City</li>
          <li><a href="#">Manchester</a></li>
          <li><a href="#">Liverpool</a></li>
          <li><a href="#">London</a></li>
          <li><a href="#">Newcastle</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Town</li>
          <li><a href="#">Wigan</a></li>
          <li><a href="#">St Helens</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Other</li>
          <li><a href="#">Warwick</a></li>
          <li><a href="#">Oxford</a></li>
          <li><a href="#">Cambridge</a></li>
        </ul>
      </div>

      <!-- Version Dropdown -->
      <div class="btn-group">             
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Version <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
          <li><a href="#">All</a></li>
          <li><a href="#">V1</a></li>
          <li><a href="#">V2</a></li>
          <li><a href="#">V3</a></li>
          <li><a href="#">V4</a></li>
          <li><a href="#">V5</a></li>
          <li><a href="#">V6</a></li>
          <li><a href="#">V7</a></li>
          <li><a href="#">V8</a></li>
        </ul>
      </div>           
    </div>
  </div>
</div>

Thanks!

Answer 1

I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select , the standard bs dropdown menu is simply for navigation, not working as a select.

The site was easy to follow and I had this working in minutes :)