trigger select box to drop down on clicking another element

Question

I am trying to 'replace' the button on select inputs. I have looked at the select replacement plugins in jquery but they are all a little bloated IMO. What I'd like to achieve is a simple span positioned over the dropdown button of the select box and when it is clicked make the select options drop.

Here is what I have:

$(document).ready(function(){

 $('select').after('<span class="cta arrow-down"></span>');
 $('input[type="submit"]').after('<span class="cta arrow-right"></span>');

 $('span.cta').each(function(){
  var $this = $(this);
  var $prev = $this.prev();
  var $dim = $prev.position();
  $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()});
  $this.click(function(){
   $prev.trigger('click');
  });
 });

});

I have tried mousedown and also click and mousedown with triggerHandler calling a relevant func but to no avail...

Is this possible at all?

score 1 · Accepted Answer · answered Aug 31 '10 at 00:45

You can't really do this in a cross-browser way, mainly due to IE ruining the fun for everyone. In early versions of IE the <select> is a control taken directly from Windows Forms (this is why it has z-index and styling issues), so many things aren't standardized/supported...since IE can't reliably do it.

To do what you're after you'll have to go the <select> replacement route, bloated or not...once again, IE is the main reason those plugins even exist.

score 1 · Answer 2 · edited Aug 09 '19 at 13:33

I'm asking the same question as the OP here, and I'm sick of hearing people say that it cannot be done.

A perfect example exists on one of the most popular websites in the world: Facebook.

On their registration page (index page, if you're not logged in) there exists drop down boxes for birth day, birth month, birth year and gender.

I've seen every example of 'spoofing' a drop down box by replacing it with divs, but this is not in play here. At least not entirely. the drop down boxes are entirely cross browser, and look the same on every platform.

Here's the proof that it's not a div, this is IE8 on windows 7:

_{(source: users.on.net)}

No HTML element can be displayed outside the browser's viewport like that.

There is obviously some element of CSS in play. In chrome, you can pad the select box and offer a border. This does not work for IE, so they have provided a div surrounding the box that only exists for IE:

_{(source: users.on.net)}

Play with this form yourself and you will see that it's behaviour is exactly as a real drop down box should behave.

I have resigned myself the the fact that there must be some JavaScript code that calls a hidden select element's drop down list to be displayed. I don't have the time to traverse Facebook's JavaScript to figure it out, but there absolutely has to be a way.

EDIT:

It seems my response was a little premature.

When I was trying to do this, I had IE8 emulating IE7 with this little beauty that I forgot I had included:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE8 displays the padding perfectly, as it is displayed in chrome. So Facebook isn't doing anything tricky.

so IE7 is the problem, I guess. Nevertheless, I created a solution that suits IE7, IE8, Chrome and Firefox 3.6.15 (the only ones I tested).

Here is the image:

Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
    <style type="text/css">
      .hidden{
        padding:5px;
        display:inline;
        border:1px solid #888888;
        font-family:Verdana;
        font-size:10pt;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.hidden').focus(function(){
          $(this).css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).css('border', '1px solid #888888');
        });
      });
    </script>
    <!--[if IE 7]>
    <style type="text/css">

      .regselectdiv{
        position:relative;
        display:inline;
        padding:5px;
        padding-left:6px;
        border:0px;
        border:1px solid #888888;
        float:left;
        margin-right:7px;
      }

      .selectwrap{
        position:relative;
        border:0px;
        overflow:hidden;
      }

      .arrow{
        position:absolute;
        width:15px;
        height:16px;
        background:url('arrow.png');
        margin-left:-17px;
        border:1px solid #707070;
      }

      .border{
        display:none;
        position:absolute;
        width:15px;
        height:16px;
        border:1px solid #3c7fb1;
        background:none;
        margin-left:-17px;
      }

      .selectwrap:hover .arrow{
        visibility:hidden;
      }

      .selectwrap:hover .border{
        display:inline;
      }

      .hidden{
        margin-top:-2px;
        margin-left:-2px;
        line-height:5px;
        padding:0px;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {

        $('.hidden').wrap('<div class="regselectdiv"><div class="selectwrap">');

        $('.border, .selectwrap').live('mouseleave', function(){
          $('.arrow').show();
        });

        $('.hidden').focus(function(){
          $(this).parent().parent().css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).parent().parent().css('border', '1px solid #888888');
        });

        $('.selectwrap').each(function() {
          wrapper($(this));
        });

        function wrapper(x) {
          var arrow = "<div class='border'></div><div class='arrow'></div>";
          x.append(arrow);
          var height = x.find('select').height();
          var width = x.find('select').width();
          x.width(width+2);
          x.height(height);
        }
      });
    </script>
    <![endif]-->

  </head>
  <body>
    <select class='hidden'>
      <option>Month:</option>
      <option>Jan</option>
    </select>
    <select class='hidden'>
      <option>Day:</option>
      <option>1</option>
    </select>
    <select class='hidden'>
      <option>Year:</option>
      <option>2011</option>
    </select>
  </body>
</html>

trigger select box to drop down on clicking another element

2 Answers2

Linked