how can I keep a select dropdown open after selection?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Panos Antoniad
    New Member
    • Oct 2010
    • 3
    #1

    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)
    Code:
    function removeSelectHandler(object) {
        object.onclick = null;
}
<option onclick="selected();removeSelectHandler(this);"></option>
    2)
    Code:
    <option onclick="selected();return false;"></option>
    Any help appreciated!
    Last edited by gits; Oct 17 '10, 09:30 PM. Reason: added code tags
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5388
      #2
      here is a quick and dirty example that would work in Firefox - basically you should use the corresponding addEventListene r/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:

      Code:
      <html>

<script type="text/javascript">

function applySelectHandling() {
    var node = document.getElementById('foo');
    var opts = node.childNodes;
        
    for (var i = 0, opt; opt = opts[i]; i++) {
        if (opt.tagName == 'OPTION') {
            opt.onmouseup = function(e) {
                e.stopPropagation();
                e.preventDefault();
            }
        }
    }
}

</script>

<body onload="applySelectHandling();">

<select id="foo">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

</body>

</html>

        Comment

        • Panos Antoniad
          New Member
          • Oct 2010
          • 3
          #3
          thanks!

          Thanks! I will try this ...

            Comment

            Previous template Next
            Working...