Есть ли способ добавить добавочный номер во всех строках HTML-кода

Question

У меня есть раскрывающийся список (выберите -> вариант) в HTML, и один выбор содержит много вариантов. Есть ли способ добавить добавочный / уникальный номер для каждой опции / строки.

например: в идентификаторе я хочу назначить добавочный / уникальный номер автоматически каждому идентификатору.

<select name="select_data"> 
    <option id="1" value="index">index</option>
    <option id="2" value="one">one</option>
    <option id="3" value="two">two</option>
    <option id="4" value="three">three</option>
    <option id="5" value="four">four</option>
</select> 

Примечание: Редактор - VSCODE.

Я не хочу это через jquery, который может увеличиваться в браузере в качестве вывода. Я просто хочу это только в редакторе.

Answer 1

Вы можете использовать счетчик приращений CSS, если вы не хотите использовать функции JS.

 body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

 select > option {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
}

Вы можете посмотреть: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_counter-reset3, чтобы лучше понятьчто я пытался сделать так.