javascript to pull down select menu programatically

Question

I'm looking for a way to use javascript or jquery to automatically pull down a select menu drop down, upon click of a button. I'm having this issue since I'm using a text field which allows for custom user input to add a field dynamically to a select input, and I don't want the user to click twice, but essentially the problem is this:

$("#dropDownButton").click(function(){
  //$("#selectBox"). //What goes here???

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectBox">
  <option val=1>1</option>
  <option val=2>2</option>
</select>

<button id="dropDownButton">
  Pull Down The Select!
</button>

Possible duplicate :https://stackoverflow.com/questions/3846735/trigger-a-select-form-element-to-show-its-options-open-drop-down-options-list — Joulss, Nov 29 '17 at 01:41

score 1 · Answer 1 · answered Nov 29 '17 at 06:09

On button click , check whether the select box size is 1 or more. If it is 0 or 1 then , make it the max size on button click like this.

        $("#dropDownButton").click(function(){
        //$("#selectBox"). //What goes here???

        var no = document.getElementById("selectBox").length;
        var s;

        if($("#selectBox").prop('size') == 0 || $("#selectBox").prop('size') == 1 ) {
            s = no;    
        }
        else {
            s = 1;
        }
        $("#selectBox").attr('size', s);
    });

score 1 · Accepted Answer · answered Nov 29 '17 at 07:18

There possibly NO way to do this directly but there several weys instead. Like

:: Using a Label for Select and trigger a click event on it.

:: Use .focus() for focusing to the select element.

:: And one of the best is to make a select

$('#dropDownButton').click(function() {
        var length = $('#selectBox option').length;
       //open dropdown
        $("#selectBox").prop('size', length);

       // to close

        //$("#selectBox").prop('size', 0);
    });

But all of then an alternative to performing the action.There also the best alternative to doing this with a set of another element like list and div which used by most of the CSS frameworks like Bootstrap and Foundation.

Bootstrap dropdown

Ref

javascript to pull down select menu programatically

2 Answers2