Bootstrap：连接两个下拉菜单，不使用javascript

Question

我希望下拉菜单看起来像这样：

这些实际上只是两个按钮，有一个＆＃34;下拉切换＆＃34; class，它们由使用类＆＃34; btn-group＆＃34;。的父元素连接 并且存在许多缺点：当javascript被禁用时，它们根本不起作用，并且因为每次输入都必须是每次选择时页面滚动到最顶层的元素。

那么如何在没有任何javascript的情况下将两个常规下拉菜单设置为这些样式？如果可能，内置引导类。

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>

我想有点像这样：http://jsfiddle.net/m3hpucnp/