Open select open value with javascript

Question

Good morning, I’m with a request that I can’t find anything like this.

When clicking on select, it sends a request for javascript and fills in the data, and when filling in, I need this data to appear.

Until you fill in, okay, it works fine, but open select right away, it’s not coming out.

I tried something like

 //preenche os dados
 $.each(dados, function (i, d) {
     $('<option>').val(d.Id).text(d.Descricao).appendTo(selectbox);
 });

 //abre os dados preenchidos
 selectbox.show().focus().click();

This top code was the most I could find to open a select but it didn’t work.

Answer 1

Unfortunately there is no solution javascript "correct" to do this.

The reason is that there is no definition of an event that provides this for the element select defined in W3.org: the-select-element.html

Nor anything in Mozilla.org we found something relevant: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Of course it is possible to try some things, but as each engine of the browsers can implement the operation of select differently, there are no guarantees that work in another.

Thinking logically, you tried the right one, force Focus and click. Another option would be to force the click through an event:

var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
document.getElementById("id-do-select").dispatchEvent(event);

But there is also no guarantee that it works, so the answer is that there is no correct/reliable method to do this.

I put both ideas here: http://jsfiddle.net/w0s4xmc0/31798/
and testing with Chrome 68, FF 61, IE 10/Edge and Opera 36, only worked on Opera :(

Answer 2

A possible solution is to open select through a few tricks CSS, as described below, but I could not do that when open the select, focus on the item where the selected is found.

Where has $(el).val() != 'teste2' will the amount you want to come already filled...

function simulateClick() {

        var $target = $("#openSelect");
        var $clone = $target.clone().removeAttr('id');
        $clone.val($target.val()).css({
            overflow: "auto",
            position: 'absolute',
            'z-index': 999,
            left: $target.offset().left,
            top: $target.offset().top + $target.outerHeight(),
            width: $target.outerWidth()
        }).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() {
            $target.val($clone.val());
        }).on('click blur keypress',function(e) {
         if(e.type !== "keypress" || e.which === 13)
            $(this).remove();
        });
        $('body').append($clone);
        $clone.focus();

}

$("option").each(function(key, el){
  if($(el).val() != 'teste2') $(el).removeAttr("selected");
  else $(el).attr("selected", "true");
}, simulateClick() )

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

<select id="openSelect">
  <option value="teste1">teste1</option>
  <option value="teste2">teste2</option>
  <option value="teste3">teste3</option>
  <option value="teste4">teste4</option>
</select>

Reference : https://stackoverflow.com/questions/13234971/simulate-click-on-select-element-with-jquery