title: How to change slider switch text?
body: <p>I have a standard selects switch. And I want to change text of specific option after page is loaded (ready). Value is changed but it is not updated in the browser user interface view. 'refresh' and change() are not helping.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("#set_slider option[value='0']").text('before') ;
      $("#set_slider").change();
  
      function clickz() {
          $("#set_slider option[value='0']").text('after') ;
          $("#set_slider").change();
          $("#set_slider").slider('refresh'); 
          $("#txt").html($("#set_slider option[value='0']").text());
      }
  &lt;/script&gt;
  
  &lt;select name="set_slider" id="set_slider" data-role="slider" data-mini="false" &gt;
      &lt;option value="0" &gt;SET&lt;/option&gt;
      &lt;option value="1" &gt;OFF&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id=txt&gt;&lt;/div&gt;
  &lt;input type='button' onclick='clickz();' value='Update'/&gt;
  </code></pre>
  
  <p>this one didn't work as well:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
  &lt;head&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div data-role="page" id="page2"&gt;
      &lt;div data-role="header"&gt;&lt;h1&gt;Header&lt;/h1&gt;&lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;select name="set_slider" id="set_slider" data-role="slider" data-mini="false" &gt;
              &lt;option value="0" &gt;SET&lt;/option&gt;
              &lt;option value="1" &gt;OFF&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
        &lt;div id=txt&gt;&lt;/div&gt;
      &lt;input type='button' onclick='clickz();' value='Update'/&gt;
      &lt;div data-role="footer"&gt;
          &lt;h1&gt;Footer&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).delegate('#page2', 'pageshow', function (event, ui) {
          $("#set_slider").change();
          $("#set_slider").slider('refresh'); 
      }); 
  
      $("#set_slider option[value='0']").text('before');
      function clickz() {
          $("#set_slider option[value='0']").text('after');
          $("#txt").html($("#set_slider option[value='0']").text());
          $.mobile.changePage('#page2');
      }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>