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

我正在创建一个管理面板。在此管理面板上,超级管理员将能够编辑其他管理员的角色。在编辑屏幕上,我有一个下拉列表,其中包含管理员可以拥有的可用角色。我正在使用模板文字将此 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>`


拉莫斯之舞
浏览 98回答 1
1回答

BIG阳

您可以使用三元运算符。const adminData = {name: 'John Smith', role: 'admin'};const str = `<select class="form-control" id="editRole">&nbsp; <option value="Editor" ${adminData.role === 'editor' ? 'selected' : ''}>Editor</option>&nbsp; <option value="admin" ${adminData.role === 'admin' ? 'selected' : ''}>Admin</option>&nbsp; <option value="Super Admin" ${adminData.role === 'super admin' ? 'selected' : ''}>Super Admin</option></select>`
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript