打开一个下拉菜单，在页面上的其他地方单击

Question

I want to open this dropdown select, not by clicking on it's position but on another <span> .

Here is the dropdown menu:

<div class="styled-select">
    <span id="camDurationSpanId" style="font-size:18px; position: absolute; top:8px; width:305px; height :42px;"></span>
    <select id="camDurationId" name="camDuration" style="margin:42px 0 0 5px; border: none" onmousedown="{this.size=this.options.length;} " onchange='this.size=0;' onblur="this.size=0;">
        <option value="0">All Duration</option>
        <option value="1">Last Month</option>
        <option value="2">Last Two Weeks</option>
        <option value="3">Last Week</option>
        <option value="4">Custom</option>
    </select>
</div>

I want to open the dropdown menu by clicking over <span id="camDurationSpanId"> and also, I want to put the selected option into this span.

Here is my javascript:

$(function() {
    $('#camDurationSpanId').click(function() {
        $('#camDurationId'). //don't know what to write here

    });
});

is it possible to do so?

Answer 1

try

  $(function () {
             $('#camDurationSpanId').click(function () {
                    $('#camDurationId').attr('size',5);
                });
            });

example: https://jsfiddle.net/cmedina/o7zn8f8h/

Answer 2

In order to programatically open a select box you need to trigger a mousedown event:

$('#camDurationId').trigger('mousedown');

Here's a demo .