Скрыть элемент внутри выпадающего элемента формы

Question

Я хочу скрыть один из раскрывающихся вариантов в форме, которую я использую. Я хочу сохранить элемент в форме, так как форма выполняет некоторые вычисления, основанные на пользовательском вводе, и если я выберу опцию из формы, она нарушает вычисления, поэтому я просто хотела бы скрыть ее от пользователей, чтобы она все еще в форме, но не виден пользователям.

Я проверил область в форме, и это код. Я хочу скрыть слово "Ливерпуль".

<select class="iphorm-element-select  iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
                                <option value="Liverpool">Liverpool</option>
                                <option value="Shrewsbury">Shrewsbury</option>
                        </select>

Answer 1

Если вы работаете в среде, которая поддерживает HTML5, вы можете использовать атрибут hidden в опции, чтобы скрыть его.

Обратите внимание, что для того, чтобы это работало, оно не может быть первым option (в противном случае он будет по умолчанию).

См. этот рабочий фрагмент:

<select class="iphorm-element-select  iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
  <option value="-">Choose an option</option>
  <option value="Liverpool" hidden>Liverpool</option>
  <option value="Shrewsbury">Shrewsbury</option>
</select>

После комментария OP о редактировании существующих HTML

OP заявил:

Вероятно, проблема в том, что html генерируется плагином, который создает форму, поэтому я не могу добавить этот атрибут. Я надеялся добавить правило css, чтобы оно не отображало

. Учитывая это обстоятельство, свойство CSS visibility может использоваться для контроля, является ли option видимым, согласно следующий фрагмент:

select > option:nth-of-type(2) {
  visibility: hidden;
}

<select class="iphorm-element-select  iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
  <option value="-">Choose an option</option>
  <option value="Liverpool">Liverpool</option>
  <option value="Shrewsbury">Shrewsbury</option>
</select>

Однако, это имеет неприятный побочный эффект - оставить дыру в списке select, а не полностью ее скрыть. Однако он не позволяет отображать или выбирать эту опцию.