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

Question

我正在创建管理面板。在此管理面板上，超级管理员将能够编辑其他管理员的角色。在编辑屏幕上，我有一个下拉列表，其中包含管理员可以拥有的可用角色。我正在使用模板文字将此 HTML 注入到我自己设计的模态中。我的问题是，我不确定如何动态 select 包含保存在数据库中的管理员角色值的选项。

例如，如果管理数据的 JSON 是这样的 { name: John Smith, role: admin } 我怎么能 select 在像这样的模板文字中自动：

`<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>`

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

Selecting an option in a template literal based on string

javascript

template-literals