Выбор параметра в литерале шаблона на основе строки

Я создаю панель администратора. В этой административной панели суперадминистраторы смогут редактировать роли других администраторов. На экране редактирования у меня есть раскрывающийся список, содержащий доступные роли, которые может иметь администратор. Я использую литерал шаблона, чтобы вставить этот 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>`

Вы используете ванильный JavaScript плюс jQuery, а не React/Angular/Vue?

jarmod 18.12.2020 19:53

@jarmod Только ваниль, без jquery

klaurtar1 18.12.2020 19:54
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
2
2
856
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>`

Другие вопросы по теме