触发选择框下拉单击另一个元素

我想'选择'输入上的按钮。我已经看过jQuery中的选择替换插件，但他们都是有点臃肿IMO。我想要实现的是一个简单的跨度，位于选择框的下拉按钮上，单击时可以使选择选项下降。触发选择框下拉单击另一个元素

以下是我有：

$(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'); 
    }); 
}); 

});

我试图鼠标按下并单击与triggerHandler调用相关FUNC但无济于事的mousedown ...

这是可能的呢？

来源

2010-07-14 Ian Wood

你不能真正做到这一点的一个跨浏览器的方式，主要是由于IE毁了每个人的乐趣。在早期版本的IE中，<select>是直接从Windows窗体中获取的控件（这就是为什么它具有z-index和样式问题），所以很多事情没有标准化/支持......因为IE无法可靠地完成它。

为了做到这一点，你必须去替换路线，臃肿与否......再一次，IE是这些插件甚至存在的主要原因。

来源

2010-08-31 00:45:45

我在这里问OP的同一个问题，我厌倦了听人说它不能完成。

世界上最流行的网站之一就是一个完美的例子：Facebook。

在其注册页面（索引页，如果你没有登录）存在下拉出生当天，出生月份，出生年份和性别框。

我已经看到每个'spoofing'下拉框代替div s的例子，但这不是在这里玩。至少不完全。下拉框完全是跨浏览器的，并且在每个平台上看起来都一样。

这里的，这不是一个div证明，这是IE8在Windows 7：

http://users.on.net/mbywaters/fb.jpg

任何HTML元素都可以在浏览器的视口一样，外面被显示。

显然有一些CSS元素在使用。在Chrome中，您可以填充选择框并提供边框。这并不适用于IE浏览器，所以他们提供了一个div周围，只有存在IE箱：自己

http://users.on.net/mbywaters/fb2.jpg

玩这种形式，你会看到它的行为是完全一样的真正的下拉盒子应该有表现。

我已经辞职自己的事实，必须有一些JavaScript代码调用隐藏选择元素的下拉列表下拉显示。我没有时间来遍历Facebook的JavaScript来搞清楚，但这绝对有办法。

编辑：

看来我的回答有点不成熟。

当我试图做到这一点，我不得不仿效IE8与IE7这个小美女，我忘了我有包括：

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

IE8完全显示的垫子，因为它会显示在铬。所以Facebook没有做任何棘手的事情。

所以IE7是问题，我猜。不过，我创建了适合IE7，IE8，Chrome和Firefox 3.6.15（我测试过的唯一一款）的解决方案。

这里是图像：

http://users.on.net/mbywaters/arrow.png

下面是代码：

<!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>

来源

2011-03-18 00:03:23 Michael

触发选择框下拉单击另一个元素

回答

相关问题