title: expand select list on button click and hide select
body: <p>I have a regular select list and I would like to: </p>
  
  <ol>
  <li>Expand it on button, that is working and done</li>
  <li>Keep hidden select list until the button is clicked.</li>
  <li>I would like list options to be onclick event.</li>
  </ol>
  
  <p>Any ideas and suggestions please?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
  };
  
  window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="dropdown"&gt;
    &lt;option value="Red"&gt;Red&lt;/option&gt;
    &lt;option value="Green"&gt;Green&lt;/option&gt;
    &lt;option value="Blue"&gt;Blue&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;button id="fire" type="button" onclick="runThis()"&gt;Show dropdown items&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Alternatively what is the best way of doing Select list that respond as spinner on adndroi and ios devices?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Let me update Question now as part of this is now working:</p>
  
  <pre><code>function get_tables_restaurant(){
          if($result2 = $this-&gt;db-&gt;query('SELECT * FROM fandb_tables ORDER BY title ASC')){
  
  
    $return .= '&lt;div class="lineheight"&gt;&lt;button id="fire" type="button" class="add_table"&gt;+&lt;/button&gt;&lt;/div&gt;
    &lt;select id="dropdown"&gt;';
          while($r2 = $result2-&gt;fetch_object()){
  
          $return .= '&lt;option value="'.htmlspecialchars($r2-&gt;title).'"&gt;'.htmlspecialchars($r2-&gt;title).'&lt;/option&gt;';
  
  
          }
          $return .= '&lt;/select&gt;';
          $return .= '&lt;div id="test2" style="display: none;"&gt;
  &lt;h4&gt;Table '.htmlspecialchars($r2-&gt;title).'&lt;/h4&gt;
          &lt;form method="post" action=""&gt;
              &lt;input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2-&gt;area).'"/&gt;
              &lt;input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2-&gt;title).'"/&gt;
              &lt;input type="hidden" name="title" size="50" value="1"/&gt;
              &lt;input type="submit" value="STARTER" class="starter"/&gt;
          &lt;/form&gt;
          &lt;form method="post" action=""&gt;
              &lt;input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2-&gt;area).'"/&gt;
              &lt;input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2-&gt;title).'"/&gt;
              &lt;input type="hidden" name="title" size="50" value="2"/&gt;
              &lt;input type="submit" value="MAIN COURSE" class="maincourse"/&gt;
          &lt;/form&gt;
          &lt;form method="post" action=""&gt;
              &lt;input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2-&gt;area).'"/&gt;
              &lt;input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2-&gt;title).'"/&gt;
              &lt;input type="hidden" name="title" size="50" value="3"/&gt;
              &lt;input type="submit" value="DESSERT" class="dessert"/&gt;
          &lt;/form&gt;
          &lt;button onclick="$(\'#test2\').popup(\'hide\');" id="dismiss"&gt;DISMISS&lt;/button&gt;
  &lt;/div&gt;';
          }
  </code></pre>
  
  <p>So now for each option I need to show popup which is <code>test2</code> id div with individual values as per above example.</p>
  
  <p>I do get that this has to be inside the loop <code>while</code> however it than doesnt work at all as soon as I will place this <code>&lt;div id="test2&gt;...&lt;/div&gt;</code> inside the loop.</p>
  
  <p>Please can I ask you guys for advise?</p>
  
  <p><strong>SORTED!</strong></p>
  
  <p>:) as you said bit of reading and done:)</p>
  
  <pre><code>$( "#dropdown" ).change(function() {
        var element = document.getElementById('dropdown');
    $('#test2'+element.value).popup('show');
  </code></pre>
  
  <p>Thank you for everyones help:)</p>