You are here

multiselect.html.twig in Multiselect 8

Same filename and directory in other branches
  1. 2.x templates/multiselect.html.twig

Default theme implementation for a multiselect element.

Available variables:

  • attributes: HTML attributes for the select tag.
  • options: The option element children.

File

templates/multiselect.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for a multiselect element.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the select tag.
  8. * - options: The option element children.
  9. *
  10. * @see template_preprocess_multiselect()
  11. *
  12. * @ingroup themeable
  13. */
  14. #}
  15. <div class="multiselect-wrapper">
  16. <div class="multiselect-available">
  17. <label for="{{ multiselect.available.id }}">{{ multiselect.available.label }}</label>
  18. <select{{ multiselect.available.attributes }}>
  19. {% for option in multiselect.available.options %}
  20. {% if option.type == 'optgroup' %}
  21. <optgroup label="{{ option.label }}">
  22. {% for sub_option in option.options %}
  23. <option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
  24. {% endfor %}
  25. </optgroup>
  26. {% elseif option.type == 'option' %}
  27. <option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
  28. {% endif %}
  29. {% endfor %}
  30. </select>
  31. </div>
  32. <div class="multiselect-btns">
  33. <ul>
  34. <li class="multiselect-add">{{ multiselect.labels.add }}</li>
  35. <li class="multiselect-remove">{{ multiselect.labels.remove }}</li>
  36. </ul>
  37. </div>
  38. <div class="multiselect-selected">
  39. <label for="{{ multiselect.selected.id }}">{{ multiselect.selected.label }}</label>
  40. <select{{ multiselect.selected.attributes }}>
  41. {% for option in multiselect.selected.options %}
  42. {% if option.type == 'optgroup' %}
  43. <optgroup label="{{ option.label }}">
  44. {% for sub_option in option.options %}
  45. <option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
  46. {% endfor %}
  47. </optgroup>
  48. {% elseif option.type == 'option' %}
  49. <option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
  50. {% endif %}
  51. {% endfor %}
  52. </select>
  53. </div>
  54. </div>