如何解决根据字符串选择模板文字中的选项
我正在创建一个管理面板。在此管理面板上,超级管理员将能够编辑其他管理员的角色。在编辑屏幕上,我有一个下拉列表,其中包含管理员可以拥有的可用角色。我正在使用模板文字将此 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>`
解决方法
您可以使用三元运算符。
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>`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。