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...??

4

4 Answers 4

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');
    });
});
9
  • @Alepac Thank you for you answer, much appreciated. I did try that out. What am I doing wrong, link: jsfiddle.net/shawnfe/XE73h Apr 17, 2013 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, 2013 at 10:31
  • @Alepac I am still getting a proper outcome, please have a look a this link Apr 17, 2013 at 10:38
  • 1
    Please put a comment about your investigation on mozilla to improve the answer
    – Alepac
    Apr 17, 2013 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 2, 2017 at 20:37
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/

1
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

-3

try this

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

    document.getElementById('sel').size='2'  
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.