Bootstrap下拉框：选中项显头部，下拉列表仅展示未选中选项

嘿，我来帮你搞定这个双选项的下拉框需求！核心就是让下拉列表只渲染未被选中的那一项，对吧？我们可以通过AngularJS的ng-repeat过滤来实现，简单直接就能达到效果。

修改后的HTML代码 #

<div class="select_list" ng-class='{active:active}' ng-click="active=!active">
  <!-- 下拉头部展示当前选中的选项 -->
  <span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">
    {{obj.language_selected.name}}
  </span>
  <ul class="options">
    <!-- 仅渲染未被选中的选项 -->
    <li class="select_list_option" 
        ng-repeat="language in language_list | filter: {name: '!' + obj.language_selected.name}" 
        ng-click="obj.language_selected=language; active=false"
        ng-style="{'background-image':'url('+language.url+')'}">
      {{language.name}}
    </li>
  </ul>
</div>

关键改动说明 #

• 过滤未选中项：给ng-repeat添加了过滤条件 filter: {name: '!' + obj.language_selected.name}，它会自动筛选出name与当前选中项不匹配的语言，这样下拉列表就只会显示未选中的那一项。
• 优化交互体验：在ng-click事件里追加了active=false，选中选项后自动收起下拉框，不用手动再点一次头部。

可选的JavaScript优化（增强稳定性） #

你的原有JS代码已经能用，不过可以加个小校验，确保初始选中的选项一定在列表里（防止后续手动修改数据时出错）：

$scope.obj = {
  language_selected: { 'name': 'USA', 'url': '/Content/Images/us.png' }
};
$scope.language_list = [
  { 'name': 'USA', 'url': '/Content/Images/us.png' },
  { 'name': 'UK', 'url': '/Content/Images/uk.png' }
];

// 校验初始选中项是否在列表中，避免数据不匹配
const matchedLang = $scope.language_list.find(lang => lang.name === $scope.obj.language_selected.name);
if (matchedLang) {
  $scope.obj.language_selected = matchedLang;
}

样式补充（确保下拉列表默认隐藏） #

别忘了给下拉列表加基础样式，让它默认隐藏，只有active状态时才显示：

.select_list .options {
  display: none;
  /* 可以再加些你需要的样式，比如边框、背景色等 */
}
.select_list.active .options {
  display: block;
}

这样调整后，你的下拉框就完全符合需求了：头部始终展示当前选中的选项，下拉列表只会出现未被选中的那一项，切换后自动收起，交互流畅又符合预期！

内容的提问来源于stack exchange，提问作者Dhanasekar