显示在列表顶部选择选项

Question

使用一个简单的<select>列表与许多<option>元素，我试图让选定的选项显示在选择列表的顶部（当列表再次显示时，它显示在底部）。

我的环境是使用bootstrap和jQuery，但如果我们可以避免它，我们对其他第三方代码不感兴趣。解决方案必须适用于Chrome和Safari - 但支持越多越好。

编辑：根据要求，这是一个使用简单的<select>列表与许多<option>元素的示例。

• 单击下拉列表以显示选项列表。
• 单击数字选项25。
• 单击下拉列表再次显示选项列表。
• 请注意，所选选项显示在列表的底部。
• 回想一下，当我再次显示列表时，我试图让所选选项显示在选择列表的顶部。

编辑2：动机是让用户更容易选择列表中的下一个项目。目前，他们必须向下滚动然后点击下一个项目，但理想情况下他们不必滚动以选择最有可能的“下一个选择”项目。

<select id="example">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
</select>

Answer 1

使用jquery，在更改选择时，您可以添加所选选项。这只是意味着添加到开头（反对追加，这意味着添加到最后）。

$('#example').on('change', function() {

  var opt = $(this).find('option:selected');
  $(this).prepend(opt);

});

Here is the working fiddle。

Answer 2

如果您知道要选择的选项的值，请使用以下内容：

$("#id_of_select_element").val(3);