469,277 Members | 1,914 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

How to hide the Form select option onmouseout ?

Hi,
I am trying to figure it out how to to hide in onmouseout the select options of a form. Below is the code I got so far. It isn't working.

Please help.

Thanks



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en-US">
  3. <head>
  4. <title></title>
  5.   <script type="text/javascript" language="JavaScript">
  6.  function hideSelectSearchCon() {
  7.   var selectSearchCon = document.getElementById("catGroup").options[];
  8.   selectSearchCon.style.visibility = "hidden";
  9.  }
  10. </script>
  11. <head>
  12. <body>
  13. <form action="#" method="post">
  14. <select name="catGroup" id="catGroup" onmouseout="javascript:hideSelectSearchCon();">
  15. <option value="Select" selected="selected">Select</option>
  16. <option value="Select_2">Select_2</option>
  17. <option value="Select_3">Select_3</option>
  18. <option value="Select_4">Select_4</option>
  19. <option value="Select_5">Select_5</option>
  20. </select>
  21.  
  22. <input type="submit"/>
  23. </form>
  24. </body>
  25. </html>
Feb 14 '08 #1
7 4296
gits
5,390 Expert Mod 4TB
hi ...

you may play with:

Expand|Select|Wrap|Line Numbers
  1. function hideSelectSearchCon() {
  2.     var selectSearchCon = document.getElementById("catGroup");
  3.     selectSearchCon.blur();
  4. }
  5.  
but with that you cannot select the option with the mouse since the mouseout fires when you mouseout the select-box ... what do you really want to achieve? may be you have to combine more events but please explain in more detail what you need ...

kind regards
Feb 14 '08 #2
Thanks for your reply.
I have a top nav drop down menu, then below I have a search. If I select in the search box the select option, then I go to the drop down menu I wouldn't like to see the select option from the search box. However, now I can see the select option drop down menu from the search at the top of the top nave drop down menu.

Basically, I want to achieve that the option select from the search box behaves like the drop down menu above.

http://oaso.net/kitres/

Thanks
Feb 14 '08 #3
gits
5,390 Expert Mod 4TB
hmmm ... with the link you gave i cannot see what you mean (just get a standard page with google-search there is no dropdown?). a search with a dropdown-list? are this categories to search for? why not using the dropdown too for this purpose?

kind regards
Feb 15 '08 #4
Sorry, I didn't type the correct URL.
This is it.
http://oarso.net/kitres/

I have a top nav drop down menu, then below I have a search. If I select in the search box the select option, then I go to the drop down menu I wouldn't like to see the select option from the search box. However, now I can see the select option drop down menu from the search at the top of the top nave drop down menu.

Basically, I want to achieve that the option select from the search box behaves like the drop down menu above.



Thanks
Feb 15 '08 #5
gits
5,390 Expert Mod 4TB
hi ...

i found a working solution for Firefox:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function hideSelectSearchCon() {
  4.     var selectSearchCon = document.getElementById("catGroup");
  5.     selectSearchCon.blur();
  6. }
  7.  
  8. function check_mouse_pos(e) {
  9.     if (typeof e == 'undefined') {
  10.         e = window.event;
  11.     }
  12.  
  13.     var src = typeof window.event == 'undefined' ? e.target : e.srcElement;
  14.     var opt = { 'SELECT': 1, 'OPTION': 1 };
  15.  
  16.     if (typeof opt[src.nodeName] == 'undefined') {
  17.         hideSelectSearchCon();
  18.         remove_event(document, check_mouse_pos);
  19.     }
  20. }
  21.  
  22. function add_event(obj, func) {
  23.     if (typeof window.addEventListener != 'undefined') {
  24.         obj.addEventListener('mouseover', func, true);
  25.     } else {
  26.         obj.attachEvent('onmouseover', func);
  27.     }
  28. }
  29.  
  30. function remove_event(obj, func) {
  31.     if (typeof window.addEventListener != 'undefined') {
  32.         obj.removeEventListener('mouseover', func, true);
  33.     } else {
  34.         obj.detachEvent('onmouseover', func);
  35.     }    
  36. }
  37. </script>
  38.  
  39. <form action="#" method="post">
  40. <select name="catGroup" id="catGroup" onclick="add_event(document, check_mouse_pos);">
  41. <option value="Select" selected="selected">Select</option>
  42. <option value="Select_2">Select_2</option>
  43. <option value="Select_3">Select_3</option>
  44. <option value="Select_4">Select_4</option>
  45. <option value="Select_5">Select_5</option>
  46. </select>
  47. <input type="submit">
  48. </form>
  49.  
and prepared it for IE but it seems that in IE the event-handling is weird with select-elements? ... so i think the best way would be to work around it with a custom dropdown ... or may be we find a IE solution for this too?

kind regards
Feb 18 '08 #6
Thank you so much, it does work in IE7 and Firefox.
However, It doesn't work in IE6.

I am going to keep trying. Otherwise, I would do as you suggest. Use a drop down menu instead of the select option.

http://www.oarso.net/kitres/
Feb 22 '08 #7
thnx alot bro...the code that u have posted here helped me alot..
Jun 19 '14 #8

Post your reply

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

Similar topics

19 posts views Thread by dmiller23462 | last post: by
5 posts views Thread by srampally | last post: by
14 posts views Thread by David | last post: by
6 posts views Thread by Norman | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.