469,909 Members | 1,786 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

how can I keep a select dropdown open after selection?

Hello,

I have a standard select form which I want to keep open after selection in order to allow for multiple selections without having to take space at the page (when using the "multiple" option).

I tried to cancel the event propagation at the onclick event at each item as described at http://en.wikipedia.org/wiki/DOM_events

Both following approaches do not work (I am using firefox):

1)
Expand|Select|Wrap|Line Numbers
  1. function removeSelectHandler(object) {
  2.         object.onclick = null;
  3. }
  4. <option onclick="selected();removeSelectHandler(this);"></option>
2)
Expand|Select|Wrap|Line Numbers
  1. <option onclick="selected();return false;"></option>
Any help appreciated!
Oct 16 '10 #1
2 7965
gits
5,390 Expert Mod 4TB
here is a quick and dirty example that would work in Firefox - basically you should use the corresponding addEventListener/attachEvent methods, that are described in the link you already mentioned, to add events ... and you would need to take care for the crossbrowser compatibility - as i said, the following example is just a quick and dirty showcase for Firefox:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <script type="text/javascript">
  4.  
  5. function applySelectHandling() {
  6.     var node = document.getElementById('foo');
  7.     var opts = node.childNodes;
  8.  
  9.     for (var i = 0, opt; opt = opts[i]; i++) {
  10.         if (opt.tagName == 'OPTION') {
  11.             opt.onmouseup = function(e) {
  12.                 e.stopPropagation();
  13.                 e.preventDefault();
  14.             }
  15.         }
  16.     }
  17. }
  18.  
  19. </script>
  20.  
  21. <body onload="applySelectHandling();">
  22.  
  23. <select id="foo">
  24.     <option value="1">1</option>
  25.     <option value="2">2</option>
  26.     <option value="3">3</option>
  27.     <option value="4">4</option>
  28.     <option value="5">5</option>
  29. </select>
  30.  
  31. </body>
  32.  
  33. </html>
  34.  
Oct 17 '10 #2
Thanks! I will try this ...
Oct 17 '10 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Ralph Freshour | last post: by
5 posts views Thread by Richard Lionheart | last post: by
2 posts views Thread by Bumbrlik | last post: by
1 post views Thread by Olivier Sanzot | last post: by
reply views Thread by SM | last post: by
2 posts views Thread by Wolfgang | last post: by
1 post views Thread by ghjk | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.