How to hide the Form select option onmouseout ?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • fsalvador
    New Member
    • Feb 2008
    • 5
    #1

    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



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title></title>
  <script type="text/javascript" language="JavaScript">
 function hideSelectSearchCon() {
  var selectSearchCon = document.getElementById("catGroup").options[];
  selectSearchCon.style.visibility = "hidden";
 }
</script>
<head>
<body>
<form action="#" method="post">
<select name="catGroup" id="catGroup" onmouseout="javascript:hideSelectSearchCon();">
<option value="Select" selected="selected">Select</option>
<option value="Select_2">Select_2</option>
<option value="Select_3">Select_3</option>
<option value="Select_4">Select_4</option>
<option value="Select_5">Select_5</option>
</select>

<input type="submit"/>
</form>
</body>
</html>
    Last edited by gits; Jul 11 '14, 01:52 PM. Reason: added code tags
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      hi ...

      you may play with:

      [CODE=javascript]function hideSelectSearc hCon() {
      var selectSearchCon = document.getEle mentById("catGr oup");
      selectSearchCon .blur();
      }
      [/CODE]
      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

        Comment

        • fsalvador
          New Member
          • Feb 2008
          • 5
          #3
          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

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              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

                Comment

                • fsalvador
                  New Member
                  • Feb 2008
                  • 5
                  #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

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5390
                      #6
                      hi ...

                      i found a working solution for Firefox:

                      Code:
                      <script type="text/javascript">

function hideSelectSearchCon() {
    var selectSearchCon = document.getElementById("catGroup");
    selectSearchCon.blur();
}

function check_mouse_pos(e) {
    if (typeof e == 'undefined') {
        e = window.event;
    }

    var src = typeof window.event == 'undefined' ? e.target : e.srcElement;
    var opt = { 'SELECT': 1, 'OPTION': 1 };

    if (typeof opt[src.nodeName] == 'undefined') {
        hideSelectSearchCon();
        remove_event(document, check_mouse_pos);
    }
}

function add_event(obj, func) {
    if (typeof window.addEventListener != 'undefined') {
        obj.addEventListener('mouseover', func, true);
    } else {
        obj.attachEvent('onmouseover', func);
    }
}

function remove_event(obj, func) {
    if (typeof window.addEventListener != 'undefined') {
        obj.removeEventListener('mouseover', func, true);
    } else {
        obj.detachEvent('onmouseover', func);
    }    
}
</script>

<form action="#" method="post">
<select name="catGroup" id="catGroup" onclick="add_event(document, check_mouse_pos);">
<option value="Select" selected="selected">Select</option>
<option value="Select_2">Select_2</option>
<option value="Select_3">Select_3</option>
<option value="Select_4">Select_4</option>
<option value="Select_5">Select_5</option>
</select>
<input type="submit">
</form>
                      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
                      Last edited by gits; Jul 11 '14, 01:51 PM. Reason: fixed code tags

                        Comment

                        • fsalvador
                          New Member
                          • Feb 2008
                          • 5
                          #7
                          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/

                            Comment

                            • vini vinay
                              New Member
                              • Jun 2014
                              • 1
                              #8
                              thnx alot bro...the code that u have posted here helped me alot..

                                Comment

                                Previous template Next
                                Working...