$(document).ready(
  function() {
    $('div.my-skinnable-select').each(
      function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('my-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
              var text = this.options[0].innerHTML;
              if (selectContainer.find("select option:selected").size()>0) {
                  text = selectContainer.find("select option:selected").html();
              }
            $(this).prev().text(text);
            $(this).prev().append('<span class="ui-icon ui-icon-triangle-2-n-s"></span>');
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.find("select").change(function() {
          // Set the value of the html
          parentTextObj.text($(this).find("option:selected").html());
          parentTextObj.append('<span class="ui-icon ui-icon-triangle-2-n-s"></span>');
        })        
      }
    );
  }
);

