Jquery click on another element and display select options

Question

at 1st kindly visit this fiddle:

I was wondering is there a way to transfer the click? I meant, when I click on the green area ( <div class="arrow"/> ) in the meantime the wi<select> tag also get clicked, or selected and shows the options bellow. Is there a way to do this?

NB: I am doing this for IE supported <select> tag.

I tried with the following code:

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

but, It's not working. Can you solve it?

Thanks.

Clicking a select programatically won't make it open. – adeneo May 11 '13 at 18:58 — adeneo, May 11 '13 at 18:58

score 2 · Answer 1 · edited May 23 '17 at 10:28

2

You could see this answer

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

A click on the select won't open it you have to change the size of it.

edited May 23 '17 at 10:28

Community

1
1

answered May 11 '13 at 19:01

sergioadh

1,461
1
16
24

score 1 · Answer 2 · answered May 11 '13 at 18:49

1

You should try select dropdown plugins like dropkick.js

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

answered May 11 '13 at 18:49

user1

1,063
1
8
28

Goran Lepur · Answer 3 · 2013-05-11T19:45:20.397

1

I did it with size changing hack here: 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");
});

Also here's a simple example with fake selectbox I did couple of days ago http://jsfiddle.net/Jc2qq/ it would be easy to remake to suit needs of this question.

edited May 11 '13 at 19:45

answered May 11 '13 at 19:14

Goran Lepur

594
1
4
15

2

of course you need to attach an onblur event so that it returns to it's original size. – sergioadh May 11 '13 at 19:16
In cases like this smart idea is to do this with hidden input field and some div's to emulate selectbox. So you don't have to do this in first place. – Goran Lepur May 11 '13 at 19:18
It's only increasing the size and I can't even close it. thank you. – Asif May 11 '13 at 19:27
1

save the original height and attach an onblur event to return the size and the height to the control. – sergioadh May 11 '13 at 19:33
It's just to give you basic idea, you can close it by adding blur event, returning css to default, and setting size to 1. – Goran Lepur May 11 '13 at 19:34
I need to do it with ` – Asif May 11 '13 at 20:06

score 1 · Accepted Answer · edited May 23 '17 at 12:31

Okay, following the Idea from answer no. two of this question, here is a solution: Visit this fiddle

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

Jquery click on another element and display select options

4 Answers4

Linked