javascript - 根据文本选择一个选择选项

Question

如果可能的话，我需要在“现代 DOM”中使用它。

这是代码。

<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

我已经尝试了以下方法，但我需要它作为文本，但这不起作用。

var val = 'US 10.5';    
document.querySelector('#skuAndSize [value="' + val + '"]').selected = true;

请帮忙，我在现代 dom 中需要这个，因为我在 Swift 中使用它(evaluateJavaScript)。

Answer 1

您可以使用 javascript 设置 selectedIndex

const val = 'US 10.5';
const skuAndSize = document.getElementById ('skuAndSize');
skuAndSize.selectedIndex = [...skuAndSize.options].findIndex (option => option.text === val);

<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>