Как написать правильную логику обрезания в jquery?

Question

[laravel_creative_3103]

Условно есть select и option

<select class="form-control" name="ChildGanderNameFilter" id="ChildGanderNameFilterId">
     <option value="0">Andrey Petrov [e-mail]</option>
     <option value="1">Andrey Petrov [e-mail]</option>
     <option value="2">Andrey Petrov [e-mail]</option>
</select>

Как можно сделать так, чтоб при выборе какого-то option, чтоб он оставлял только ФИО, а почтовые данные не отображал. Т.е при нажатии на селект отображается вся инфа ФИО и почта, но при выборе этого человека, в инпуте отображался только ФИО, а почту обрезал в JQUERY

Answer 1

[Stalker_RED]

Чтобы option не отображал, почту можно вырезать.

document.querySelectorAll('#ChildGanderNameFilterId option')
  .forEach(el => {
    el.textContent = el.textContent.replace(/\s\S+@\S+/, '')
  });

Чтобы какой-то инпут что-то там отображал, добавьте для начала этот инпут. У вас эти данные нигде кроме разметки не сохранены? Можно их не просто вырезать, а сохранить в какой-нибудь массив, или в data-атрибуты переписать.

Comments

[laravel_creative_3103]

Извините, то есть чтоб ни в инпуте, а в селекте отображал

[laravel_creative_3103]

+реализация должна быть через jquery

[Stalker_RED]

laravel_creative_3103, ну перепишите на jQuery. Там изменится только первая строка с выборкой и вместо forEach() будет each().
А лучше выбросьте свой учебник, он устарел лет на 10, если не больше.

Если нужно чтобы прям в этом селекте и отображал, то со стандартным элементом так не выйдет. Невозможно отследить открыт ли select или закрыт средствами css или js. Максимум на что вы можете рассчитывать это на :hover и :focus, но это не покрывает все случаи использования, в частности при выборе через tab, при переборе элементов с клавиатуры и при select multiple.

Придется писать свой селект или подключать какую-то библиотеку. Если уж любите jQuery, то посмотрите в сторону select2 или chosen.