Expand options for a select element when clicking button

Question

Expand options for a select element when clicking button

Navigation

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

2

Is it possible to force display of the options of a <select> element via javascript?

The idea is to simulate a user's click on select . Imagine that I have select disabled, and clicking a button it is enabled and already expanded for the user to select the desired option.

I tried to focus on the field or shoot a click but I could not expand, any suggestions?

$("exibir").on("click", function(){
  $("#exemplo1").focus();
  $("#exemplo1").trigger("click");
  $("#exemplo1").click();
  $("#exemplo1").mousedown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><selectname="exemplo1" id="exemplo1">
    <option value="">Selecione</option>
    <option value="">Caique</option>
    <option value="">Natane</option>
  </select>
</div>
<div>
  <button name="exibir" id="exibir">
    Expandir select e exibir opções
  </button>
</div>

javascript html

asked by anonymous 09.02.2018 / 17:45

3 answers

2

What you are looking for is this:

<select id="teste" onmouseover="this.size=this.options.length" onmouseout="this.size=1" style="position:absolute">
  <option>ITEM1</option>
  <option>ITEM2</option>
  <option>ITEM3</option>
  <option>ITEM4</option>
  <option>ITEM5</option>
</select>

Take the test and report the result.

09.02.2018 / 18:35

2

I found this solution that can answer you, so I understand your question ... Credits

NOTE: You need to do the part of enabling Select, but it is already a path

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><style>html,body{width:100%;height:100%;margin:0;padding:0;}</style></head><body><selectid="selecttest">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">free</option>
    <option value="4">four</option>
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">height</option>
    <option value="9">nine</option>
    <option value="10">ten</option>
    <option value="11">eleven</option>
    <option value="12">twelve</option>
    <option value="13">thirdteen</option>
</select>
    
<input type="button" value="Abrir" id="MyButton"/>

<script>
   $('#MyButton').on("click",function(){

$("#selecttest").attr("size", 8);
$("#selecttest").css("position","fixed");
$('#MyButton').css("margin-left", $("#selecttest").width() + 5);
});

$('#selecttest').on("change",function(){

$("#selecttest").attr("size", 1);

});
</script>
    
</body>
</html>

Here is a readonly Select template that can help you. I got the answer from another question: Credits

select[readonly] {
  background: #eee; 
  pointer-events: none;
  touch-action: none;
}

<select readonly="readonly" tabindex="-1" aria-disabled="true">
  <option value=""></option>
  <option value="1" selected>Cliente</option>
  <option value="2">Contador</option>
  <option value="3">Vendedor</option>
</select>

09.02.2018 / 18:06

Event onclick in image Input type datetime error

score 2 · Accepted Answer

You can not really open select programmatically. This is a constraint imposed by the browser policy, where there must be direct user interaction.

However, there are ways to manipulate the element to "simulate" as if select has been clicked and expanding it. The most common is to transform it into a listbox , by adding the property size .

To get away from the ordinary, I have created a script that may apply to you. It consists of simulate a "false select" that applying CSS styles is almost identical to the original select both visually and functionally.

See an example with the commented code:

$(document).ready(function(){

   function fakePop(el){
      // populo o falso select
      var val = el.find("option:selected").text();
      var opcoes = '';
      $.each(el.find("option"), function(e,t){
         var sel = $(t).text() == val ? ' class="selected"' : '';
         $("#fake_select").append('<li'+sel+'>'+$(t).text()+'</li>');
      });
   }

   $("#fake_select").on("mouseleave", function(){
      $("#fake_select").html('');
      var el = $("#exemplo1");
      fakePop(el);
   });

   // esconder o falso select
   function hideFakeSelect(){
      $("#fake_select").hide().html('');
   }
   
   $("#exibir").click(function(){
      
      var el = $("#exemplo1");
   
      if(!$("#fake_select").is(":visible")){
   
         // ajusto a posição e o tamanho do falso select
         $("#fake_select").css({
            "top": el.height()+"px",
            "width": el.width()+"px"
         }).show();
         
         fakePop(el); // populo o falso select

      }else{
         
         // escondo o falso select se ele estiver visível
         hideFakeSelect();
      }
   
   });
   
   $(document).on("click mouseover", "#fake_select li", function(e){
   
      // escondo o falso select ao clicar em uma opção
      if(e.type == "click"){
         $('#exemplo1').val($('#exemplo1 option:contains('+$(this).text()+')').val());
      }else{
         
         // efeito hover
         $("#fake_select li")
         .removeClass("selected")
         .not($(this));
      }
   }).on("click", function(){ // escondo o falso select ao clicar em uma opção ou em outro lugar da página
      hideFakeSelect();
   });

   // evito que o falso select feche ao clicar no botão
   $("#exibir").click(function(e){
      e.stopPropagation();
   });
});

*{
   position: relative;
}

#fake_select{
   display: none;
   position: absolute;
   left: 0;
   z-index: 99;
   background: #fff;
   border: 1px solid #999;
}

#fake_select li{
   list-style: none;
   padding: 0 3px;
   cursor: default;
}

#fake_select .selected,
#fake_select li:hover{
   background: #3f81fb;
   color: #fff;
}

#exemplo1:focus + #fake_select{
   display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><selectname="exemplo1" id="exemplo1">
    <option value="">Selecione</option>
    <option value="1">Caique</option>
    <option value="2">Natane</option>
  </select>
  <span id="fake_select"></span>
</div>
<br>
<div>
  <button name="exibir" id="exibir">
    Expandir select e exibir opções
  </button>
</div>