Open select open value with javascript

Question

Open select open value with javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Good morning, I have a request that I can not find anything like this.

When you click on the select, it sends a request to the javascript and fills in the data, and when filling in, I need that data to appear.

To fill, fine, it works fine, but open the select shortly after, it is not going out.

I've tried something like this

 //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 code above was the maximum I found to open a select but it did not work.

javascript jquery

asked by anonymous 13.08.2018 / 14:06

2 answers

What does arroba (@) mean in variables in Ruby? Use await with object that implements the __await__

score 1 · Answer 1

Unfortunately, it does not have a "correct" javascript solution to do this.

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

Nothing at mozilla.org will find anything relevant: link

p>

Of course you can try a few things, but since each browser engine can implement the operation of select differently, there are no guarantees that it works in another.

Thinking logically, you tried the right one, forcing the focus and still the click. Another option is 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: link
and testing with Chrome 68, FF 61, IE 10 / Edge and Opera 36, only worked in Opera: (

score 1 · Answer 2

One possible solution is to open the select by means of some CSS tricks, as described below, but I could not do that when I open select , the focus is on the item where selected / p>

Where you have $(el).val() != 'teste2' is the value you want to be filled already ...

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><selectid="openSelect">
  <option value="teste1">teste1</option>
  <option value="teste2">teste2</option>
  <option value="teste3">teste3</option>
  <option value="teste4">teste4</option>
</select>

Reference: link