$(document).ready(
  function() {
      $('.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">_Selecione</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML.substring(0,17))
          }
        );
          // Store the parent object
          var parentTextObj = selectContainer.children().prev();
          // As we click on the options
          selectContainer.children().click(function() {
              // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML.substring(0, 17));
          })
          selectContainer.children().change(function() {
              // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML.substring(0, 17));
          })
      }
    );
  }
);

$(document).ready(
    function () {
        $('.my-skinnable-selectX').each(
          function (i) {
              selectContainer = $(this);
              // Remove the class for non JS browsers
              selectContainer.removeClass('my-skinnable-selectX');
              // Add the class for JS Browers
              selectContainer.addClass('skinned-select');
              // Find the select box
              selectContainer.children().before('<div class="select-text">_Selecione</div>').each(
              function () {
                  $(this).prev().text(this.options[this.selectedIndex].innerHTML.substring(0, 18))
              }
            );
              // Store the parent object
              var parentTextObj = selectContainer.children().prev();
              // As we click on the options
              selectContainer.children().click(function () {
                  // Set the value of the html
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML.substring(0, 18));
              })
              selectContainer.children().change(function () {
                  // Set the value of the html
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML.substring(0, 18));
              })
          }
        );
    }
);

$(document).ready(
    function () {
        $('.my-skinnable-selectX1').each(
          function (i) {
              selectContainer = $(this);
              // Remove the class for non JS browsers
              selectContainer.removeClass('my-skinnable-selectX');
              // Add the class for JS Browers
              selectContainer.addClass('skinned-select');
              // Find the select box
              selectContainer.children().before('<div class="select-text">_Selecione</div>').each(
              function () {
                  $(this).prev().text(this.options[this.selectedIndex].innerHTML)
              }
            );
              // Store the parent object
              var parentTextObj = selectContainer.children().prev();
              // As we click on the options
              selectContainer.children().click(function () {
                  // Set the value of the html
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML);
              })
              selectContainer.children().change(function () {
                  // Set the value of the html
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML);
              })
          }
        );
    }
);

$(document).ready(
    function () {
        $('.my-skinnable-selectX2').each(
          function (i) {
              selectContainer = $(this);
              // Remove the class for non JS browsers
              selectContainer.removeClass('my-skinnable-selectX2');
              // Add the class for JS Browers
              selectContainer.addClass('skinned-select');
              // Find the select box
              selectContainer.children().before('<div class="select-text">_Selecione</div>').each(
              function () {
                  $(this).prev().text(this.options[this.selectedIndex].innerHTML)
              }
            );
              // Store the parent object
              var parentTextObj = selectContainer.children().prev();
              // As we click on the options
              selectContainer.children().click(function () {
                  // Set the value of the html
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML);
              })
              selectContainer.children().change(function () {
                  // Set the value of the html
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML);
              })
          }
        );
    }
);