1

I have a regular select list and I would like to:

  1. Expand it on button, that is working and done
  2. Keep hidden select list until the button is clicked.
  3. I would like list options to be onclick event.

Any ideas and suggestions please?

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);
};
<select id="dropdown">
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>

Alternatively what is the best way of doing Select list that respond as spinner on adndroi and ios devices?

UPDATE

Let me update Question now as part of this is now working:

function get_tables_restaurant(){
        if($result2 = $this->db->query('SELECT * FROM fandb_tables ORDER BY title ASC')){


  $return .= '<div class="lineheight"><button id="fire" type="button" class="add_table">+</button></div>
  <select id="dropdown">';
        while($r2 = $result2->fetch_object()){

        $return .= '<option value="'.htmlspecialchars($r2->title).'">'.htmlspecialchars($r2->title).'</option>';


        }
        $return .= '</select>';
        $return .= '<div id="test2" style="display: none;">
<h4>Table '.htmlspecialchars($r2->title).'</h4>
        <form method="post" action="">
            <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/>
            <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/>
            <input type="hidden" name="title" size="50" value="1"/>
            <input type="submit" value="STARTER" class="starter"/>
        </form>
        <form method="post" action="">
            <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/>
            <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/>
            <input type="hidden" name="title" size="50" value="2"/>
            <input type="submit" value="MAIN COURSE" class="maincourse"/>
        </form>
        <form method="post" action="">
            <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/>
            <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/>
            <input type="hidden" name="title" size="50" value="3"/>
            <input type="submit" value="DESSERT" class="dessert"/>
        </form>
        <button onclick="$(\'#test2\').popup(\'hide\');" id="dismiss">DISMISS</button>
</div>';
        }

So now for each option I need to show popup which is test2 id div with individual values as per above example.

I do get that this has to be inside the loop while however it than doesnt work at all as soon as I will place this <div id="test2>...</div> inside the loop.

Please can I ask you guys for advise?

SORTED!

:) as you said bit of reading and done:)

$( "#dropdown" ).change(function() {
      var element = document.getElementById('dropdown');
  $('#test2'+element.value).popup('show');

Thank you for everyones help:)

Insane Skull
  • 9,220
  • 9
  • 44
  • 63
Paweł Gawroński
  • 17
  • 1
  • 6

2 Answers2

0

You can set display: none for the dropdown in CSS, and make a .show class with display: inline-block to be set to the dropdown when the button is clicked.

Have a look at jQuery's .addClass() and .click() functions for this.

EDIT: Using part of the answer from here, I edited your jsFiddle: https://jsfiddle.net/sqp2xej5/13/

Community
  • 1
  • 1
Philip
  • 2,888
  • 2
  • 24
  • 36
  • tried that, not sure what Im doing wrong: [https://jsfiddle.net/sqp2xej5/10/](https://jsfiddle.net/sqp2xej5/10/) – Paweł Gawroński Mar 20 '16 at 18:13
  • Perfect, now how do I merge this with option onclick function? I need to call `` and that way it is not working – Paweł Gawroński Mar 20 '16 at 19:52
  • Inside `$(document).ready()` function, bind a function to the `click` event of the options. Have a look at jQuery's documentation on `click` event binding: http://api.jquery.com/click/ – Philip Mar 20 '16 at 20:56
  • Im sorry Im completly blind on JS knowledge, trying to do this that way: ` $('#dropdown').change(function(){ $(this).addClass('test2'); });` doesnt work is that the right way of thinking at least? – Paweł Gawroński Mar 20 '16 at 21:03
  • You want to call `$('#test2').popup('show')` when the value of the dropdown changes? Then inside the `.change()` function just call that. Either way, take some time to read the documentation (jQuery or Javascript in general) ;) – Philip Mar 20 '16 at 22:28
  • thanks, @Philip I have added `$( "#dropdown" ).change(function() { $('#test2').popup('show'); });` to the `$(document).ready(function()` and it is working fine. I have updated my question if you dont mind looking into it for me please? – Paweł Gawroński Mar 21 '16 at 09:00
0

You can try this

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);
};

$('#reload').click(function(){
  $('#dropdown').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>
<button id="reload" type="button">Hide dropdown items</button>
rmondesilva
  • 1,732
  • 3
  • 17
  • 29