title: diffrent default and selected value in html select
body: <p>I need different default and selected value for HTML <code>&lt;select&gt;</code> tag. It means that I need my <code>&lt;form&gt;</code> load with a selected <code>&lt;option&gt;</code>, then after pressing <code>&lt;button type="reset"&gt;</code> button another option set to select tag, but how?</p>
  
  <pre><code>&lt;select size="1" name="select1" &gt;
      &lt;option  value='1'&gt; default value &lt;/option&gt;
      &lt;option selected="true" value="2"&gt;selected value&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>onclick event for button doesn't works:</p>
  
  <pre><code>&lt;button onclick="resetSearchPanel();" type="reset"&gt; ...
  </code></pre>
  
  <p>java script function:</p>
  
  <pre><code> function resetSearchPanel() {
  
    document.forms['submitSearch'].elements['select1'].value = "1";
  
  }
  </code></pre>
  
  <p>above snippet works when the button type property setted as 'button' but it doesn't work when type set to reset!</p>