Question

使用一个简单的<select>列表，其中包含许多<option>元素，我试图将所选选项显示在选择列表的顶部（当前显示在列表的底部）再次显示。）

我的环境正在使用引导程序和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);

在列表顶部显示选择选项

2 个答案: