title: how to hide <select> element by onchange
body: <p>I have an  element which is set to display:none in css.
  When the parent element gets clicked then the select appears through </p>
  
  <pre><code>document.getElementById('selectId').style.display = 'block';
  </code></pre>
  
  <p>Now I want that after some option is selected, the selector disappears. </p>
  
  <p>When calling <code>style.display = 'none'</code> from onchange then it blinks for a fraction of a second and is again visible. I even checked with <code>console.log(obj.style.display)</code> and indeed the display changes quick.</p>
  
  <p>How can I achieve this behavior: <code>display = 'none'</code> by <code>onchange</code> ?</p>
  
  <p>Pure JavsScript or JQuery does not matter</p>
  
  <p><strong>Edit:</strong> It looks like the <code>onchange</code> event on the <code>&lt;select&gt;</code> triggers the <code>onclick</code> for the parent which resets the display to 'block'.</p>
  
  <p><strong>Code and Solution</strong>: on the suggestion from @AndyG I modified the function which gets called by the onchange event like this:</p>
  
  <pre><code>function selChanged(obj) {
      $(obj).click(function(event){
          event.stopPropagation();
      });
      obj.style.display = 'block';
  }
  </code></pre>
  
  <p>And now it wont trigger the parent 'onclick' anymore.
  Here the html code:</p>
  
  <pre><code>&lt;td onclick="showSelect(selId)"&gt;
      &lt;select id="selId" onchange="selChanged(this)"&gt;
         &lt;option&gt;
           ....
         &lt;/option&gt;
  &lt;/td&gt;
  </code></pre>