Geek asks and answers

Reorder SELECT list with jQuery

Any suggestion on how to adapt / rearrange the elements <option>inside <select>? Here is the html:

<select class="required" name="jform[params][language]" id="jform_params_language">
    <option value="cs-CZ">Czech (Cestina)</option>
    <option value="en-GB">English (United Kingdom)</option>
    <option value="sk-SK">Slovak (Slovencina)</option>
</select>

I need this to be like this:

<select class="required" name="jform[params][language]" id="jform_params_language">
    <option value="sk-SK">Slovak (Slovencina)</option>
    <option value="en-GB">English (United Kingdom)</option>
    <option value="cs-CZ">Czech (Cestina)</option>
</select>

It should be mentioned that I cannot change html. I tried using the jQuery function sort(), but don't know how to do it.

+5
source share
2 answers

You can use the method reverse.

var $sel = $('#jform_params_language'),
    $o = $sel.children().toArray().reverse();

$sel.append($o); //[0].selectedIndex = 0;

http://jsfiddle.net/3UWx6/

+8
source

eg. to move the 3rd parameter to the 1st option, we can use below jquery:

$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));
+4
source

More articles:


All Articles