<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
Sorting options elements alphabetically using jQuery.
</
title
>
<
script
src
=
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
id
=
"body"
>
<
h1
id
=
"h1"
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
p
id
=
"GFG_UP"
style="font-size: 15px;
font-weight: bold;">
</
p
>
<
select
id
=
"elmt"
>
<
option
value
=
"v1"
> YEW </
option
>
<
option
value
=
"v4"
> ZAC </
option
>
<
option
value
=
"v2"
> ABC </
option
>
<
option
value
=
"v3"
> DFG </
option
>
<
option
value
=
"v5"
> MNO </
option
>
<
option
value
=
"v9"
> STU </
option
>
</
select
>
<
br
>
<
br
>
<
button
onclick
=
"gfg_Run()"
>
Click Here
</
button
>
<
p
id
=
"GFG_DOWN"
style="color:green;
font-size: 30px;
font-weight: bold;">
</
p
>
<
script
>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"Click on the button to sort the options" +
" of the selected elements.";
function gfg_Run() {
var options = $("#elmt option");
options.detach().sort(function(a, b) {
var at = $(a).text();
var bt = $(b).text();
return (at > bt) ? 1 : ((at <
bt
) ? -1 : 0);
});
options.appendTo("#elmt");
el_down.innerHTML
=
"Select options are sorted"
;
}
</script>
</
body
>
</
html
>