By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,602 Members | 1,473 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,602 IT Pros & Developers. It's quick & easy.

How to hide the Form select option onmouseout ?

P: 5
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
Share this Question
Share on Google+
7 Replies


gits
Expert Mod 5K+
P: 5,353
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

P: 5
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
Expert Mod 5K+
P: 5,353
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

P: 5
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
Expert Mod 5K+
P: 5,353
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

P: 5
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

P: 1
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.