如何用JavaScript设置HTML SlimSelect组件的选中项？

需求说明 #

需要在浏览器控制台用单行JavaScript设置SlimSelect组件的选中项，支持按索引（1-4对应选项顺序）、value属性、选项文本三种方式，常规select设置方法无效，后续需封装进AppleScript控制浏览器。

目标HTML结构 #

<div class="vb-fg-field-input ">
  <select class="slimselect required" name="tx_vbformgenerator_vb_formgenerator[Anrede]" tabindex="-1" data-ssid="ss-2638" style="display: none;" data-ddg-inputtype="unknown">
    <option value=" ">not specified</option>
    <option value="1">Mrs.</option>
    <option value="2">Mr.</option>
    <option value="5">Mx.</option>
  </select>
  <div class="ss-2638 ss-main slimselect required" style="">
    <div class="ss-single-selected">
      <span class="placeholder">not specified</span>
      <span class="ss-deselect ss-hide">x</span>
      <span class="ss-arrow">
        <span class="arrow-down"></span>
      </span>
    </div>
    <div class="ss-content">
      <div class="ss-search ss-hide">
        <input readonly="" type="search" placeholder="Search" tabindex="0" aria-label="Search">
      </div>
      <div class="ss-list">
        <div class="ss-option ss-disabled ss-option-selected" data-id="84420967">not specified</div>
        <div class="ss-option" data-id="78147293">Mrs.</div>
        <div class="ss-option" data-id="65028532">Mr.</div>
        <div class="ss-option" data-id="13286904">Mx.</div>
      </div>
    </div>
  </div>
</div>

此前无效尝试 #

以下代码仅修改了原生select值，但未触发SlimSelect的UI同步，导致无效：

document.getElementsByClassName('slimselect')[0].value = "Mr."

返回：<- 'Mr.'

document.getElementsByClassName('slimselect')[0].querySelectorAll('option')[2].selected = "Mr."

返回：<- 'Mr.'

document.getElementsByClassName('slimselect')[0].querySelector('option')[2]

返回：<- Undefined

有效单行JS方案 #

SlimSelect是基于原生select封装的组件，需同时更新原生select并触发change事件，或直接模拟用户点击组件选项，确保UI与数据同步。

1. 按索引设置（索引0对应第一个选项，1-4对应需求的1-4） #

const s=document.querySelector('select.slimselect[name="tx_vbformgenerator_vb_formgenerator[Anrede]"]');s.selectedIndex=2;s.dispatchEvent(new Event('change'));

• 说明：selectedIndex=2对应第三个选项（Mr.），按需修改索引值即可。

2. 按value属性设置 #

const s=document.querySelector('select.slimselect[name="tx_vbformgenerator_vb_formgenerator[Anrede]"]');s.value="2";s.dispatchEvent(new Event('change'));

• 说明：value="2"对应选项Mr.，按需替换为目标value值（如"1"对应Mrs.，"5"对应Mx.）。

3. 按选项文本设置 #

const s=document.querySelector('select.slimselect[name="tx_vbformgenerator_vb_formgenerator[Anrede]"]');const o=Array.from(s.options).find(opt=>opt.textContent.trim()==="Mr.");if(o){o.selected=true;s.dispatchEvent(new Event('change'));}

• 说明：将"Mr."替换为目标文本（如"not specified"、"Mrs."）即可。

备选方案：直接模拟点击组件选项 #

无需操作原生select，直接点击SlimSelect的可视化选项：

Array.from(document.querySelectorAll('.ss-main .ss-option')).find(el=>el.textContent.trim()==="Mr.")?.click();

• 说明：该方式更贴近用户操作，自动同步原生select值与UI状态。

内容的提问来源于stack exchange，提问作者d-b