如何避免下拉选框中用户角色默认选项重复显示？

嘿，我懂你现在碰到的麻烦——你先手动把当前用户的角色单独写了一个<option>，接着又加了Admin和User的选项，这就导致当用户角色是Admin时，页面上会出现两个一模一样的Admin选项，确实有点闹心对吧？

核心问题就是重复渲染了当前角色，咱们可以用几种方式搞定，推荐用最优雅的循环渲染方案：

方案一：用框架循环渲染（推荐，以Vue为例） #

看你的代码里用到了{{data.role}}这种模板语法，应该是用了Vue这类前端框架。咱们可以把所有角色存成一个数组，循环生成选项，同时给当前角色设置默认选中：

<div class="col-md-9">
  <select>
    <option 
      v-for="role in ['Admin', 'User']" 
      :key="role" 
      :selected="role === data.role"
    >
      {{ role }}
    </option>
  </select>
</div>

这么做的好处很明显：

• 彻底避免重复，每个角色只渲染一次
• 以后新增角色时，只需要在数组里加元素就行，不用改模板结构
• 自动给当前角色设置默认选中状态，逻辑清晰又省心

方案二：原生JS动态生成选项 #

如果是用后端模板渲染（比如JSP、Thymeleaf这类），不想用前端框架的话，可以用原生JS动态生成选项：

<div class="col-md-9">
  <select id="roleSelect">
  </select>
</div>

<script>
  // 定义所有角色列表
  const roles = ['Admin', 'User'];
  // 假设后端渲染的当前角色（替换成你实际的变量）
  const currentRole = '{{data.role}}';
  const selectElement = document.getElementById('roleSelect');

  // 循环生成每个选项
  roles.forEach(role => {
    const option = document.createElement('option');
    option.textContent = role;
    // 如果是当前角色，设置为选中
    if (role === currentRole) {
      option.selected = true;
    }
    selectElement.appendChild(option);
  });
</script>

方案三：模板条件判断（适合简单场景） #

如果不想改太多代码，也可以用模板引擎的条件判断，跳过和当前角色重复的选项：

<div class="col-md-9">
  <select>
    <!-- 默认选中当前角色 -->
    <option selected>{{data.role}}</option>
    <!-- 只有当前角色不是Admin时，才渲染Admin选项 -->
    {{#if data.role !== 'Admin'}}
      <option>Admin</option>
    {{/if}}
    <!-- 只有当前角色不是User时，才渲染User选项 -->
    {{#if data.role !== 'User'}}
      <option>User</option>
    {{/if}}
  </select>
</div>

不过这种方式扩展性差，以后加新角色的话要写更多判断，所以还是优先推荐前两种方案～

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