根据字符串在模板文字中选择一个选项

Question

我正在创建一个管理面板。在此管理面板上，超级管理员将能够编辑其他管理员的角色。在编辑屏幕上，我有一个下拉列表，其中包含管理员可以拥有的可用角色。我正在使用模板文字将此 HTML 注入到我自己设计的模式中。我的问题是，我不确定如何动态选择包含数据库中保存的管理员角色值的选项。例如，如果管理数据的 JSON 是这样的，{ name: John Smith, role: admin }我如何在模板文字中自动选择它：`<select class="form-control" id="editRole">      <option value="Editor">Editor</option>      <option value="admin">Admin</option>      <option value="Super Admin">Super Admin</option>    </select>`我尝试了这样的方法，但似乎不起作用：const adminData = {name: John Smith, role: admin};`<select class="form-control" id="editRole">${document.querySelector('option[value*="${adminData.role}"]').selected = true}<option value="Editor">Editor</option>  <option value="admin">Admin</option>  <option value="Super Admin">Super Admin</option></select>`

Answer 1

您可以使用三元运算符。

const adminData = {name: 'John Smith', role: 'admin'};

const str = `<select class="form-control" id="editRole">

  <option value="Editor" ${adminData.role === 'editor' ? 'selected' : ''}>Editor</option>

  <option value="admin" ${adminData.role === 'admin' ? 'selected' : ''}>Admin</option>

  <option value="Super Admin" ${adminData.role === 'super admin' ? 'selected' : ''}>Super Admin</option>

</select>`