Expand options of a select element by clicking button

Asked

Viewed 1,479 times

2

It is possible to force the display of the options of an element <select> through javascript?

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

I tried to focus on the field or shoot one click but I couldn’t 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>
  <select name="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

  • Ah, I think I get it. You want to expand the select?

  • As well as force the display of options, show where?

3 answers

2

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

NOTE: You need to do the enabling part of 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>


<select id="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’s a readonly Select template that tb can help you. I got the answer to 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>

2

What you seek 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.

  • Although the solution works on the onmouseover of the element, I can’t do this by calling directly in javascript and this way also push the elements below. I edited my question because it was not very clear. Anyway it is a way to expand select.

2


There’s really no way to open the select programmatically. This is a restriction imposed by the browser policy, where there should be direct user interaction.

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

To escape the ordinary, I created a script that can be applicable to your case. It consists of simulate a "fake select" that applying the CSS styles is almost identical to the select original both visually and functionally.

See an example with 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>
  <select name="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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.