0

Using a simple <select> list with many <option> elements, I am trying to get the selected option to show up at the top of the select list (it currently shows up at the bottom when the list is shown again).

My environment is using bootstrap and jQuery but we're not interested in other third party code if we can avoid it. Solution must work in Chrome and Safari - but the more support the better.

EDIT: As requested, here's an example using a simple <select> list with many <option> elements.

  • Click on the dropdown to show the list of options.
  • Click on number option 25.
  • Click on the dropdown to show the list of options again.
  • Notice that the selected option is shown at the bottom of the list.
  • Recall that I am trying to get the selected option to show up at the top of the select list when list is shown again.

EDIT 2: The motivation is to make it easier for the user to select the next item in the list. Currently they have to scroll down then click the next item, but ideally they wouldn't have to scroll in order to select the most likely 'next to select' item.

<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>
A554551N
  • 145
  • 1
  • 2
  • 10
  • 1
    When do you want the selected option to be on top? on page load or on select? what is your back-end, who is populating the select? – Nawed Khan Apr 23 '19 at 17:36
  • 3
    Can you show the code that you have tried and that is relevant to the issue? [mcve] – imvain2 Apr 23 '19 at 17:45
  • To clarify: @NawedKhan - I want the selected option on top when the select list is viewed (following interaction with the element). Back-end is ColdFusion produced HTML of a simple ` – A554551N Apr 25 '19 at 13:48
  • What you are looking for is something akin to a scroll to feature, I think this is a browser thing, check different browsers, Mozilla , it may already be happening in them. This should help : https://stackoverflow.com/a/33437048/2757519 – Dev Man May 08 '19 at 21:36
  • So close @ImmortalDude - except as far as I can tell that style of solution (scrolling) only works if the select element is already showing its options at the time of the click. I even tried putting in a `setTimeout()` to delay execution of that scrolling until after the list is displayed ... but still no luck. – A554551N May 10 '19 at 16:22

2 Answers2

1

Using jquery, on change of the select you can prepend the selected option. which simply means add to the beginning (as oppose to append, which means add to the end).

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

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

});

Here is the working fiddle.

Nawed Khan
  • 4,393
  • 1
  • 10
  • 22
  • This is very close to what I was looking for, except the reason I was hoping to display the selected item at the top was to make it easier for the user to select the next item (so they don't have to scroll). I suppose I didn't think about this interpretation of the problem, so I didn't clarify beforehand. This does solve the problem as originally posted though. – A554551N May 08 '19 at 21:29
-1

If you know the value of the option to be selected then use below:

$("#id_of_select_element").val(3);
Asif Uddin
  • 38
  • 5
  • 1
    An explanation of why this works and a simple demo (stack snippet) showing it working would be helpful to future readers. Looking at it myself, I don't see how it could possibly work — you're simply setting the value of the select element, not moving the position of the option element. – Stephen P Apr 23 '19 at 18:36
  • Thanks for the advice @StephenP. I will keep that in mind :) – Asif Uddin Apr 25 '19 at 08:19