title: Display value in select tag instead of text
body: <p>I want to create a dropdown list, which should display value instead of text.</p>
  
  <p>But, when I click the dropdown, the option should display the text instead of value.</p>
  
  <p>I have added an example here, but it is not working as expected:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;Test&lt;/title&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;select&gt;
    &lt;option name="One" value="1"&gt;One&lt;/option&gt;
    &lt;option name="Two" value="2"&gt;Two&lt;/option&gt;
    &lt;option name="Three" value="3"&gt;Three&lt;/option&gt;
    &lt;option name="Four" value="4"&gt;Four&lt;/option&gt;
   &lt;/select&gt;
  
  &lt;script&gt;
    $(document).ready(function() {
      $('select').click(function() {
        $('select :selected').text($('select :selected').val());
      });
    });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a picture of the example.</p>
  
  <p><a href="https://i.stack.imgur.com/ZSjjQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZSjjQ.png" alt="example"></a></p>