Создать «выбранный» html тег в списке

Question

У меня есть плагин Wordpress под названием «Bookly». Он генерирует список с некоторыми значениями. Мне нужно получить выбранное значение с помощью Jquery, но это окно выбора не генерирует selected = "selected", когда я выбираю значение.

Как мне этого добиться?

PHP file:

<select id="service" class="bookly-select-mobile bookly-js-select-service">
   <option value=""><?php echo esc_html( Common::getTranslatedOption( 'bookly_l10n_option_service' ) ) ?></option>
</select>

HTML render:

<select id="service" class="bookly-select-mobile bookly-js-select-service">
   <option value="">Choose a service</option>
   <option value="1">Service 1</option>
   <option value="2">Service 2</option>
</select>

Что мне нужно:

<select id="service" class="bookly-select-mobile bookly-js-select-service">
   <option value="">Choose a service</option>
   <option value="1" selected="selected">Service 1</option>
   <option value="2">Service 2</option>
</select>

Answer 1

const service = document.getElementById('service');

service.addEventListener('click', (e) => {

  // wipe previous 'selected' elements
  Array.from(e.target.querySelectorAll('option')).forEach((option) => {
    option.removeAttribute('selected');
  });

  e.target.querySelector(`option[value="${e.target.value}"`).setAttribute('selected', 'selected');
});

Вот JSFiddle , где вы можете увидеть его в действии.