0

I'd like to have drop down menus that look like this:
enter image description here
Those are actually just two buttons that have a "dropdown-toggle" class and they are connected by a parent element that uses the class "btn-group".
And there are a lot of disadvantages: They don't work at all when javascript is disabled and because every entry has to be an element the page scrolls to the very top every time you select something.

So how can I style two regular drop down menus to look like these without any javascript? If possible with built in bootstrap classes.

http://www.bootply.com/0qbchZBz3B

<div class="btn-group" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button id="itemButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" value="Silver" aria-haspopup="true" aria-expanded="false">
      Shirt
      <span class="caret"></span>
    </button>
    <ul id="itemDropDown" class="dropdown-menu">
        <li><a href="#" data-value="Pants">Pants</a></li>
        <li><a href="#" data-value="Shirt">Shirt</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button id="sizeButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" value="M" aria-haspopup="true" aria-expanded="false">
      M
      <span class="caret"></span>
    </button>
    <ul id="sizeDropDown" class="dropdown-menu">
        <li><a href="#" data-value="S">S</a></li>
        <li><a href="#" data-value="M">M</a></li>
        <li><a href="#" data-value="L">L</a></li>
    </ul>
  </div>
</div>

<script>
$(function() {
  $(".dropdown-menu li a").click(function(){
    //e.preventDefault();
    $(this).closest(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
    $(this).closest(".btn-group").find('.btn').val($(this).data('value'));
    //$(this).css("display":"none");
    console.log("DropDown value changed!")
    //return; //return so that we are not actually visiting '#' (doesn't work)
  });
});
</script>

I guess somewhat like this: http://jsfiddle.net/m3hpucnp/

Forivin
  • 13,544
  • 25
  • 91
  • 183
  • *"...and because every entry has to be an element the page scrolls to the very top every time you select something..."* ?? That doesn't make any sense. If you mean it scrolls because they have `href`s, the documentation can tell you what to do about that. – T.J. Crowder Jun 28 '16 at 15:59
  • well, at least that scrolling issue can be fixed by replacing `#` with `#!` .. but bootstrap dropdowns require javascript, so I don't get why you can't use it – moped Jun 28 '16 at 16:00
  • Every single component I have used on the website that I'm currently working on works just fine with javascript disabled. Why would I break that just for some stupid drop down menu? – Forivin Jun 28 '16 at 16:06
  • In your click function you have to write a parameter `e`. `$(".dropdown-menu li a").click(function(e)` – max Jun 28 '16 at 16:08
  • Okay, well thanks. I guess that problem is solved. But I'm still stuck at having to use JavaScript. – Forivin Jun 28 '16 at 16:10

0 Answers0