不选择选项列表中的值的焦点选项

Question

我有一个要求，它基于打开一个带有很多选项的“选择”，但它应该在列表的一半开始选择，而不选择启动组件的那个值

<select> 
   <option value="1">value 1</option> 
   <option value="2">value 2</option> 
   <option value="3">value 3</option> 
   <option value="4">value 4</option> 
   <option value="5">value 5</option> 
   <option value="6">value 6</option>
   <option value="7">value 7</option> 
   <option value="8">value 8</option> 
   <option value="9">value 9</option> 
   <option value="10">value 10</option>

当用户打开列表时，它应该从中间开始而不选择该选项，看看中间选项是如何被聚焦但没有被选中的：

有没有办法使用 jQuery 来实现这一点？

Answer 1

免责声明：造型<select> 是一项棘手的工作。在 Chrome、FF、Edge、Windows10 中测试

document.querySelectorAll("select[size]").forEach(EL => {
  
  const h = EL.scrollHeight / EL.options.length; // option height
  const i = Math.floor(EL.options.length / 2); // Index of the half-way option
  const s = Math.floor(EL.size / 2); // Get the size (also half-way)
  
  EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
  EL.scroll(0, h * (i - s));
});

select option.highlight {
  background: #0bf;
  color: #fff;
}

<select size="3">
  <option value="1">value 1</option>
  <option value="2">value 2</option>
  <option value="3">value 3</option>
  <option value="4">value 4</option>
  <option value="5">value 5</option>
  <option value="6">value 6</option>
  <option value="7">value 7</option>
  <option value="8">value 8</option>
  <option value="9">value 9</option>
  <option value="10">value 10</option>
</select>

注意：CSS-.highlight 选项可能是一个非常糟糕的 UI，并导致人们认为该选项实际上是 selected，而它显然 不是。
避免做用户不习惯在网络世界中看到的事情。

因此：而不是做

EL.options[i].classList.add("highlight"); // (PS: this is bad UX)

宁可这样做：

EL.options[i].selected = true;