Я создаю панель администратора. В этой административной панели суперадминистраторы смогут редактировать роли других администраторов. На экране редактирования у меня есть раскрывающийся список, содержащий доступные роли, которые может иметь администратор. Я использую литерал шаблона, чтобы вставить этот 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>`
@jarmod Только ваниль, без jquery
Вы можете использовать тернарный оператор.
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>`
Вы используете ванильный JavaScript плюс jQuery, а не React/Angular/Vue?