22

I am trying to expand a select dropdown upon clicking on a link. 

<button type="button" id="btn">Click Me!</button> 
<select id='sel' name='sel'>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
    <option>item 4</option>
</select>

And the Javescript is as follows.

$(document).ready(function() {
    $("#btn").click(function() {
       $("#sel").trigger('click');
    });
});

Any Ideas...??

user2289967
  • 223
  • 1
  • 2
  • 5
  • possible duplicate of http://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery – Dhaval Marthak Apr 17 '13 at 09:44
  • The answer is in the duplicate above. Change `$("#sel").trigger('click');` to `$("#sel").attr('size', 4);` – dsgriffin Apr 17 '13 at 09:47
  • I do not want it to look like a select multiple box, but rather have the select dropdown, with the dropdown expanded. – user2289967 Apr 17 '13 at 10:30
  • Possible duplicate of [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) – rath Oct 10 '17 at 10:34

4 Answers4

16

You cannot mimic native browser event using .trigger. Looking at this link to the jQuery tutorial it seems you need .simulate method from jquery.simulate.js. Moreover the open event of the dropdown box is given by mousedown not click.

Update: So the code become:

$(document).ready(function() {
    $("#btn").click(function() {
       $("#sel").simulate('mousedown');
    });
});
Alepac
  • 1,833
  • 13
  • 24
  • @Alepac Thank you for you answer, much appreciated. I did try that out. What am I doing wrong, link: http://jsfiddle.net/shawnfe/XE73h/ – user2289967 Apr 17 '13 at 10:26
  • there was an error in my previous code, you need the `mousedown` event not the click, see my updated answer. – Alepac Apr 17 '13 at 10:31
  • @Alepac I am still getting a proper outcome, please have a look a this [link](http://jsfiddle.net/shawnfe/XE73h/2/) – user2289967 Apr 17 '13 at 10:38
  • your jsfiddle works on my browser. Probably it's platform dependent issue, I use Chrome on linux, what do you use? – Alepac Apr 17 '13 at 10:40
  • Awesome, I checked it out on Chrome it works perfectly :) I am using Mozilla 20.0.1. I did not see a result in Mozilla. I will look into it, thank you for your help.. – user2289967 Apr 17 '13 at 10:51
  • 1
    Please put a comment about your investigation on mozilla to improve the answer – Alepac Apr 17 '13 at 10:55
  • 8
    This doesn't work. After including the file and linking to it properly, all I get is (".simulate is not a function). Not sure how this got 14 upvotes. – VoidKing Feb 02 '17 at 20:37
  • Hey have tried a same example , also inlcuded the simulate js , still its not working !!! – Rupali Pemare Sep 11 '17 at 09:20
  • Uncaught TypeError: $(...).simulate is not a function. Hmm, I already included the file into my project, but it did not work – NoName Jun 22 '18 at 03:11
2
//https://stackoverflow.com/a/10844589/7926961
  function openDropdown(elementId) {
        function down() {
            var pos = $(this).offset(); // remember position
            var len = $(this).find("option").length;
                if(len > 20) {
                    len = 20;
                }

            $(this).css("position", "absolute");
            $(this).css("zIndex", 9999);
            $(this).offset(pos);   // reset position
            $(this).attr("size", len); // open dropdown
            $(this).unbind("focus", down);
            $(this).focus();
        }
        function up() {
            $(this).css("position", "static");
            $(this).attr("size", "1");  // close dropdown
            $(this).unbind("change", up);
            $(this).focus();
        }
        $("#" + elementId).focus(down).blur(up).focus();
    }

DEMO:

http://jsfiddle.net/XE73h/444/

Jefferson Reis
  • 88
  • 7
  • Thanks, mate :-) -> made a slight modification to add mouse click and 'enter'-support: https://jsfiddle.net/slowy/pL0z0d7t/12/ – slowy Feb 14 '18 at 15:59
0

I thinks find to solve this problem i have test in ie, FF, chrome and Edge.

HTML

<select id="selecttest">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">free</option>
    <option value="4">four</option>
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">height</option>
    <option value="9">nine</option>
    <option value="10">ten</option>
    <option value="11">eleven</option>
    <option value="12">twelve</option>
    <option value="13">thirdteen</option>
</select>
<input type="button" value="testing" id="MyButton"/>

JQUERY

$('#MyButton').on("click",function(){
    $("#selecttest").attr("size", 8);
    $("#selecttest").css("position","fixed");
    $('#MyButton').css("margin-left", $("#selecttest").width() + 5);});
$('#selecttest').on("change",function(){
    $("#selecttest").attr("size", 1);});

jsfiddle test this

S.TOF
  • 1
  • 2
-3

try this 

$(document).ready(function() {
    $("#btn").click(function() {

    document.getElementById('sel').size='2'  
    });
});
Jashwant
  • 28,410
  • 16
  • 70
  • 105
user2282362
  • 25