使引导下拉按钮级联答案

【问题标题】：Make bootstrap drop down buttons cascading使引导下拉按钮级联
【发布时间】：2015-04-06 17:39:07
【问题描述】：

我在我的网页上添加了两个下拉框，如下所示，但我想让它们级联，然后将下拉按钮的值传递给函数。

<div class="btn-group">
   <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
      <ul class="dropdown-menu">
         <li><a href="#" onClick="return false;">Action</a></li>
         <li><a href="#" onClick="return false;">Another action</a></li>
         <li><a href="#" onClick="return false;">Something else here</a></li>
         <li class="divider"></li>
         <li><a href="#" onClick="return false;">Separated link</a></li>
      </ul>
</div><!-- /btn-group -->
<div class="btn-group">
   <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
      <ul class="dropdown-menu">
         <li><a href="#" onClick="return false;">Action</a></li>
         <li><a href="#" onClick="return false;">Another action</a></li>
         <li><a href="#" onClick="return false;">Something else here</a></li>
         <li class="divider"></li>
         <li><a href="#" onClick="return false;">Separated link</a></li>
      </ul>
</div><!-- /btn-group -->

【问题讨论】：

级联是什么意思？我还建议你构建一个 bootply 并添加你的代码（包括你的 js 函数）。
stackoverflow.com/a/9773450/3917754 检查@Andres Ilich 的这个答案，我认为这就是你想要的
感谢您的链接...但我想要的是假设用户从第一个下拉列表中选择一个国家..那么与所选国家相关的所有州都应填充在第二个下拉列表中
您需要一个与所选国家/地区相关的数组。之后就很容易了。
@Press 不一定，您也可以使用枚举来完成任务。只需将国家枚举映射到州枚举。

标签： jquery html ajax twitter-bootstrap

【解决方案1】：

正如 KyleT 在 cmets 中提到的，您可以使用枚举代替数组来完成。然而，作为一个舒适的选择，我将使用一个数组。 Fiddle

var states = [
    "Kansas",
    "Oklahoma",
    "Texas"    
];

$('.dropdown-menu > li > a').click(function() {
    yourFunction(this.text);
});

function yourFunction(val) {
        
    if ( val === "Action" ) {
        $('#states').html('');
        for ( var i in states ) {
            $('#states').append("<li><a href='#'>" + states[i] + "</a></li>");
        }
    }
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
  <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
  <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="states">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>
<!-- /btn-group -->

【讨论】：