I Want to Move selected items to the top of multiple select using JavaScript or jQuery before or after form submit.

For example, this:

<select multiple="multiple" name="users" id="users">
    <option value="1" selected="selected">aaa</option>
    <option value="2">bbb</option>
    <option value="3" selected="selected">ccc</option>
    <option value="4">ddd</option>
    <option value="5">eee</option>
    <option value="6" selected="selected">fff</option>
</select>

Expected result:

<select multiple="multiple" name="users" id="users">
    <option value="1" selected="selected">aaa</option>
    <option value="3" selected="selected">ccc</option>
    <option value="6" selected="selected">fff</option>
    <option value="2">bbb</option>
    <option value="4">ddd</option>
    <option value="5">eee</option
</select>

Initially am getting the sorting done. But I need to show the Selected Option first. I Have used the Struts tag for SELECT which is as follow

<s:select name="users" id="users" headerKey="-1" headerValue="ALL" value="%{#request.users}"  cssClass="form-inline form-inline-big-dropdown" list="templistMap" multiple="true" />

I Want to Move selected items to the top of multiple select using JavaScript or jQuery before or after form submit.

For example, this:

<select multiple="multiple" name="users" id="users">
    <option value="1" selected="selected">aaa</option>
    <option value="2">bbb</option>
    <option value="3" selected="selected">ccc</option>
    <option value="4">ddd</option>
    <option value="5">eee</option>
    <option value="6" selected="selected">fff</option>
</select>

Expected result:

<select multiple="multiple" name="users" id="users">
    <option value="1" selected="selected">aaa</option>
    <option value="3" selected="selected">ccc</option>
    <option value="6" selected="selected">fff</option>
    <option value="2">bbb</option>
    <option value="4">ddd</option>
    <option value="5">eee</option
</select>

Initially am getting the sorting done. But I need to show the Selected Option first. I Have used the Struts tag for SELECT which is as follow

<s:select name="users" id="users" headerKey="-1" headerValue="ALL" value="%{#request.users}"  cssClass="form-inline form-inline-big-dropdown" list="templistMap" multiple="true" />

• javascript
• jquery
• jsp
• struts

1 Answer 1

This can be done with one line:

$("#users option:selected").prependTo("#users");

Demo on jsFiddle