在列表框中生成“选定”的 html 标记答案

【问题标题】：Generate "selected" html tag in a listbox在列表框中生成“选定”的 html 标记
【发布时间】：2020-01-22 07:48:29
【问题描述】：

我有一个名为“Bookly”的 Wordpress 插件。它生成一个包含一些值的列表框。我需要通过 Jquery 获取选定的值，但是当我选择一个值时，这个选择框不会生成 selected="selected" 。

我怎样才能做到这一点？

PHP 文件：

<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 渲染：

<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>

【问题讨论】：

标签： javascript php jquery html wordpress

【解决方案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，您可以在其中看到它的运行情况。

【讨论】：