Can I move an option at the end of the select list?

Issue

I have this select:

<select id="mySelect">
    <option value="Test 1">Test 1</option>
    <option value="Test 2">Test 2</option>
    <option value="Test 3">Test 3</option>
    <option value="Test 4">Test 4</option>
    <option value="Test 5">Test 5</option>
    <option value="Test 6">Test 6</option>
    <option value="Test 7">Test 7</option>
    <option value="Test 8">Test 8</option>  
</select>

and I’d like to move the second option (Test 2) at the end of this select list. Can I with jQuery?

Solution

var $select = $('#mySelect');
$select.find('option:eq(1)').appendTo($select);

Live DEMO

Placing the option in the fifth place:

var $select = $('#mySelect');
var desiredIndex = 5;
$select.find('option').eq(desiredIndex).before($select.find('option:eq(1)'));    

Live DEMO

Answered By – gdoron is supporting Monica

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.