title: Jquery Mobile selectmenu - How to extend widget to add a <span> to the enhanced html
body: <p>In an jquery mobile application i want to edit the enhanced html of select element for the following purpose</p>
  
  <p><img src="https://i.stack.imgur.com/b5IgF.png" alt="BAScic"></p>
  
  <p>to</p>
  
  <p><img src="https://i.stack.imgur.com/O7BJ3.png" alt="Enhanced "></p>
  
  <p>For this i have edited the jquery mobile base file.</p>
  
  <pre><code>    setButtonText: function() {
      var self = this,
          selected = this.selected(),
          text = this.placeholder,
          phText = this.title,
          span = $( document.createElement( "span" ) );
          spanNew = $( document.createElement( "span" ) );
  
  
  
  
  this.button.children( "span" ).not( ".ui-li-count, .pc" ).remove().end().end().prepend( (function() {
          if ( selected.length ) {
              text = selected.map(function() {
                  return $( this ).text();
              }).get().join( ", " );
          } else {
              text = self.placeholder;
          }
  
          if ( text ) {
              span.text( text );
          } else {
  
              // Set the contents to &amp;nbsp; which we write as &amp;#160; to be XHTML compliant - see gh-6699
              span.html( "&amp;#160;" );
          }
  
          // TODO possibly aggregate multiple select option classes
          return span
              .addClass("sb")
              .addClass( self.select.attr( "class" ) )
              .addClass( selected.attr( "class" ) )
              .removeClass( "ui-screen-hidden" );
      })()); 
      var selVal = selected.map(function() {
                  return $( this ).val();
              }).get().join( ", " );
  
      // to add additional span i have included the following code   
  
      if ( selected.length &amp;&amp; selVal != "") {
          this.button.children( "span" ).not( ".ui-li-count, .sb" ).remove().end().end().prepend( (function() {   
  
              spanNew.html(self.select.attr('title'));
              // TODO possibly aggregate multiple select option classes
              return spanNew
                  .addClass("pc") 
                  .addClass( self.select.attr( "class" ) )
                  .addClass( selected.attr( "class" ) )
                  .removeClass( "ui-screen-hidden" );
          })());  
      }else{
          this.button.children( ".pc" ).remove();
      }
  
  
  },
  </code></pre>
  
  <p>I know its not good to edit the base file. So anybody can help me to move this logic out of  the jquery mobile base file.</p>
  
  <p>Any help will be appreciated</p>