title: Change value title of a converted dropdown to radio buttons
body: <p>I am using the following script (<a href="http://jsfiddle.net/a31p2371/16/" rel="nofollow noreferrer">jsfiddle</a>) to convert dropdown list to button selection.  But it displays the text of the button from the <code>value</code> of the option.</p>
  <p>Is there a way to change the text displayed for each button, without changing the value of the button? Like giving it an <code>id</code> (getElementById) or something?  So the new buttons are like: <code>Option 1</code>, <code>Option 2</code>.. etc.</p>
  <p>Current code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// http://stackoverflow.com/questions/3975331/update-drop-down-selection-with-radio-button-selection-using-jquery
  // http://jsfiddle.net/ChinmayeeG/TkGP8/
  $(function () {
  
    $('.radioSelect').each(function (selectIndex, selectElement) {
  
      var select = $(selectElement);
      var container = $("&lt;div class='radioSelectContainer' /&gt;");
      select.parent().append(container);
      container.append(select);
  
      select.find('option').each(function (optionIndex, optionElement) {
        var radioGroup = select.attr('id') + "Group";
        var label = $("&lt;label /&gt;");
        container.append(label);
  
        $("&lt;input type='radio' name='" + radioGroup + "' /&gt;")
            .attr("value", $(this).val())
            //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below
            .appendTo(label);
  
        $("&lt;span&gt;" + $(this).val() + "&lt;/span&gt;").appendTo(label);
      });
  
      //http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click
      //optional - this logic handles unchecking when clicking on an already checked radio
      container.find(":radio + span").mousedown(
        function (e) {
          var $span = $(this);
          var $radio = $($span.prev());
          if ($radio.is(':checked')) {
            var uncheck = function() {
              setTimeout(function () { $radio.prop('checked', false); }, 0);
            };
            var unbind = function() {
              $span.unbind('mouseup', up);
            };
            var up = function() {
              uncheck();
              unbind();
            };
            $span.bind('mouseup', up);
            $span.one('mouseout', unbind);
          } else {
            select.val($radio.val());
          }
        }
      );
  
      select.change((function () { //select updates radio
        $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true);
      }));
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* http://jsfiddle.net/496c9/ */
   .radioSelectContainer &gt; select {
       /*display: none;*/
  }
  .radioSelectContainer &gt; label {
      display: inline-block;
      margin: 0.3em 0.3em 0 0;
      background-color:#EFEFEF;
      border-radius:4px;
      border:1px solid #D0D0D0;
  }
  .radioSelectContainer &gt; label &gt; span {
      padding:0.2em;
      text-align:center;
      display:block;
  }
  .radioSelectContainer &gt; label &gt; input {
      position:absolute;
      top:-20px;
  }
  .radioSelectContainer &gt; label &gt; input:checked + span {
      background-color:#404040;
      color:#F7F7F7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select class="radioSelect" id="sizeOptions"&gt;
      &lt;option value="S"&gt;S&lt;/option&gt;
      &lt;option value="M"&gt;M&lt;/option&gt;
      &lt;option value="L"&gt;L&lt;/option&gt;
      &lt;option value="XL"&gt;XL&lt;/option&gt;
      &lt;option value="2XL"&gt;2XL&lt;/option&gt;
      &lt;option value="3XL"&gt;3XL&lt;/option&gt;
      &lt;option value="4XL"&gt;4XL&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>