title: How to override onclick event of HTML select tag?
body: <p>I have overriden the click event on my select tag.  When I click on my select tag as default the option list is showing.  But I have to customize that listing and do some other work when I click on select tag.</p>
  
  <p>How can I achieve this?</p>
  
  <p>please see below code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;select id="selectId"&gt;
              &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
              &lt;option value="saab"&gt;Saab&lt;/option&gt;
              &lt;option value="opel"&gt;Opel&lt;/option&gt;
              &lt;option value="audi"&gt;Audi&lt;/option&gt;
          &lt;/select&gt;
          &lt;script&gt;
              document.getElementById("selectId").onclick = function () {
                  alert("second event");
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here both event get fired, but I want only the second event.</p>