In jquery when click on the other element it triggers the dropdown list and the dropdown list has to open

Question

In jquery when click the other element that triggers the dropdown list and to show the option . here is the script code

$(document).ready(function(){
    $("select").on("click",function(){
        alert("ee");
    });
    $("#element").on("click",function(){
        $("select").trigger("click");
    });
});

In this code it shows the alert when click the element but the drop down values is not open.

Answer 1

Unless its a custom dropdown, it cannot be opened with a script. The default form controllers does not allow this, see this question

Answer 2

Answer with help of this question.

$(document).ready(function(){
    $("select").on("click",function(){
       alert("ee");
    });
    $("#element").on("click",function(){
      openSelect("select")
    });
});
var openSelect = function(selector){
     var element = $(selector)[0], worked = false;
    if (document.createEvent) { // all browsers
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    } else if (element.fireEvent) { // ie
        worked = element.fireEvent("onmousedown");
    }
    if (!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<a id="element">asdasd</a>