title: get value of hidden dropdown disabled selected option
body: <p>I have a simple dropdown list with the first option selected and disabled and two other options
  when I click on &quot;Submit&quot; and the dropdown is shown I get the value of the dropdown
  When the dropdown list is hidden I always get the value &quot;null&quot; even when I trying to set the value to a string &quot;None&quot; with $(&quot;#select&quot;).val(&quot;None&quot;) commmand</p>
  <p>How can I set the value to &quot;None&quot; after hiding the dropdown list ?</p>
  <p>===== Code output: ====</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $(&quot;.btn1&quot;).click(function(){
      $(&quot;p&quot;).hide();
      $(&quot;select&quot;).hide();
      $(&quot;select&quot;).val(&quot;None&quot;);
    });
    $(&quot;.btn2&quot;).click(function(){
      $(&quot;p&quot;).show();
      $(&quot;select&quot;).show();
      $(&quot;#select option:first&quot;).prop(&quot;selected&quot;, true);
    });
    $(&quot;#btnSmbt&quot;).click(function() {
      $(&quot;#select&quot;).val(&quot;None&quot;);
      alert($(&quot;#select&quot;).val());
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;select id=&quot;select&quot;&gt;
      &lt;option value=&quot;&quot; disabled selected&gt;Select Number&lt;/option&gt;
      &lt;option value&quot;1&quot;&gt;1&lt;/option&gt;
      &lt;option value&quot;2&quot;&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button class=&quot;btn1&quot;&gt;Hide&lt;/button&gt;
  &lt;button class=&quot;btn2&quot;&gt;Show&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; id=&quot;btnSmbt&quot; name=&quot;btnSmbt&quot;&gt;Submit&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>