Как в html коде не писать один и тот же select?

Одним из способов избежать повторения одного и того же кода для элемента "select" в HTML - это использование шаблонных движков или фреймворков, таких как Handlebars.js, Mustache и других.

Шаблонные движки позволяют создавать и использовать шаблоны, которые затем можно заполнять данными и вставлять в HTML-код. Это особенно полезно, когда нужно повторно использовать сложные структуры, такие как элемент "select" с опциями.

Прежде всего, вам нужно подключить выбранный шаблонный движок к вашему проекту. Это можно сделать через CDN или скачав соответствующую библиотеку.

После того, как вы подключили шаблонный движок, вы можете использовать его для создания шаблона "select" с опциями. Вот пример, как это может выглядеть с использованием шаблонного движка Mustache:

<script id="select-template" type="text/template">
  <select>
    {{#options}}
      <option value="{{value}}">{{label}}</option>
    {{/options}}
  </select>
</script>

Здесь мы создали скрытый скрипт с идентификатором "select-template", который содержит шаблон для элемента "select" с опциями.

Теперь, чтобы использовать этот шаблон в HTML, вы можете создать контейнер для элемента "select" и заполнить его значениями с использованием шаблонного движка.

<div id="select-container"></div>

var template = document.getElementById('select-template').innerHTML;

var data = {
  options: [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' }
  ]
};

var rendered = Mustache.render(template, data);

document.getElementById('select-container').innerHTML = rendered;

Этот код использует шаблонный движок Mustache, чтобы заполнить шаблон значениями из объекта данных. Затем он вставляет результат в HTML-код, заменяя содержимое контейнера с идентификатором "select-container".

Теперь при каждом использовании этого кода с использованием того же шаблона и разных данными, будет генерироваться новый "select" с опциями, избегая необходимости повторного написания одного и того же кода.

Обратите внимание, что это только один из способов решения проблемы повторения кода в HTML. Существуют и другие техники, такие как компонентные фреймворки, которые также могут использоваться для эффективного переиспользования кода элемента "select" и других компонентов в HTML.