title: stop chrome to show dropdown list when click a select
body: <p>I want to click a <code>&lt;select&gt;</code> but stop it to show his dropdown list</p>
  
  <pre><code>$('select').click(function(){
      if ($(this).find('option').size() &gt; 20) {
          // some code to do my job
          return false;
      }
  });
  </code></pre>
  
  <p>The code <code>return false</code> can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.</p>
  
  <p>I also tried let the <code>&lt;select&gt;</code> to be disabled, trigger <code>blur()</code> on it, or trigger <code>click()</code> on other element, but the dropdown list is still there unless user click somewhere else.</p>
  
  <p>Is this possible? ... and Thanks!</p>
  
  <hr>
  
  <p>Long story is here (if you have interested in why I want to do that):</p>
  
  <blockquote>
    <p>As you know, sometimes there will be a <code>&lt;select&gt;</code> with too many
    <code>&lt;option&gt;</code> in it, and when you click it, there will be a long dropdown
    list. Find what you need in a long dropdown list is a terrible job...
    But unfortunately there is a lot in my site.</p>
    
    <p>So I think the simplest way is to write some javascript to change
    that, when option is more than 20, show a dialog with a filter and a
    new <code>&lt;select&gt;</code> which only have filtered <code>&lt;option&gt;</code> to let find easy.</p>
    
    <p>And my problem is the dropdown list is still display, make my users
    confused... They don't know where to operate. "the dialog or the
    origin select".</p>
  </blockquote>