javascript - Jquery单击另一个元素并显示选择选项

Question

在第一次请访问这个小提琴：

http://jsfiddle.net/Y4LMX/

我想知道有没有办法转移点击？我的意思是，当我同时点击绿色区域 ( <div class="arrow"/>) 时，wi<select>标签也会被点击或选中并显示下面的选项。有没有办法做到这一点？

注意：我正在为 IE 支持的<select>标签执行此操作。

我尝试使用以下代码：

$(".ie-arrow").click(function(){
     $(this).prev().find($("select").click());
});

但是，它不起作用。你能解决吗？

谢谢。

Answer 1

你可以看到这个答案

https://stackoverflow.com/a/10844589/336542

单击选择不会打开它，您必须更改它的大小。

Answer 2

您应该尝试选择像 dropkick.js 这样的下拉插件

http://jamielottering.github.io/DropKick/

Answer 3

我在这里通过改变大小的技巧做到了：http: //jsfiddle.net/f2Upx/

$(".drop1, .drop2").append("<div class='arrow' />");

$(".arrow").click(function(){
     $(this).prev().attr('size',5).css("height","200px")
            .parent().css("height","150px");
});

这里还有一个简单的例子，我几天前做了一个假选择框http://jsfiddle.net/Jc2qq/它很容易重新制作以满足这个问题的需要。

Answer 4

好的，遵循答案中的想法。两个这个问题，这是一个解决方案：访问这个小提琴

javascript:

$(".drop1").append("<div onclick='runThis1()' class='arrow'></div>");
$(".drop2").append("<div onclick='runThis2()' class='arrow'></div>");

(function () {
        showDropdown = function (element) {
            var event;
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('mousedown', true, true, window);
            element.dispatchEvent(event);
        };

        window.runThis1 = function () {
            var dropdown = document.getElementById('dropdown');
            showDropdown(dropdown);
        };

        window.runThis2 = function () {
            var dropdown = document.getElementById('dropdown2');
            showDropdown(dropdown);
        };
    })();