dropdown numeric sorting

dropdown numeric sorting using jqueyr

by Vetrivel Samidurai

HTML

<select id="ddlList">
  <option value="3 fsdf">Three</option>
  <option value="1 fsdf">One</option>
    <option value="1 fs">one</option>
    <option value="1">a</option>
    <option value="1">b</option>
    <option value="1">A</option>
    <option value="1">B</option>
  <option value="0">Zero</option>
  <option value="2 fsdf">Two</option>
  <option value="8 fsd">Eight</option>
</select>



<select name="product_type" id="product_type" class="form-control valid" aria-invalid="false">
   <option value="" selected="" disabled="disabled">--- Select Quantity ---</option>
   <option class="page_worldwide_option" value="250 Facebook Likes (1-4 days)" style="">250 Facebook Likes (1-4 days)</option>
   <option class="page_worldwide_option" value="1000 Facebook Likes (2-5 days)" style="">1000 Facebook Likes (2-5 days)</option>
   <option class="page_worldwide_option" value="500 Facebook Likes (1-4 days)" style="">500 Facebook Likes (1-4 days)</option>
   <option class="page_worldwide_option" value="5000 Facebook Likes (5-7 days)" style="">5000 Facebook Likes (5-7 days)</option>
   <option class="page_worldwide_option" value="100 Facebook Likes (1-3 days)" style="">100 Facebook Likes (1-3 days)</option>
   <option class="page_worldwide_option" value="2500 Facebook Likes (3-6 days)" style="">2500 Facebook Likes (3-6 days)</option>
   <option class="page_worldwide_option" value="10000 Facebook Likes (7-10 days)" style="">10000 Facebook Likes (7-10 days)</option>
   <option class="page_worldwide_option" value="25000 Facebook Likes (10-18 days)" style="">25000 Facebook Likes (10-18 days)</option>
</select>



<br/><br/>
<input type="button" id="btnSort" Value=" Sort Dropdown By Text " />
<input type="button" id="btnSortVal" Value=" Sort Dropdown By Value " />

CSS

body
{
    padding: 10px;
    font-family:Calibri;
    font-size: 12pt;
}

input
{
    font-family:Calibri;
    font-size: 12pt;
}

select
{
    font-family:Calibri;
    font-size: 12pt;
    color: Black;
    background-color: Lightblue;
}

JavaScript

$(document).ready(function() {
    $('#btnSort').click(function(e) {
        debugger
        $("#ddlList").html($('#ddlList option').sort(function(x, y) {
        debugger
            return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
        }));
        $("#ddlList").get(0).selectedIndex = 0;
        e.preventDefault();
    });

    $('#btnSortVal').click(function(e) {
        $("#product_type").html($('#product_type option').sort(function(x, y) {
        var abcc = parseInt($(x).val());
        var abcd = parseInt($(y).val());
        //alert(abcc);
            return abcc < abcd ? -1 : 1;
        }))
        $("#product_type").get(0).selectedIndex = 0;
        //e.preventDefault();
    });
});