1

Tenho o seguinte HTML:

<div class="selectOptions">
  <select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

e o seguinte código jQuery:

    $(".selectOptions").on("mouseover", function () {
        $(".selectOptions select").trigger('click');
    });

Meu objetivo é, ao passar o mouse mouseover sobre a div, abrir o select.

Existe uma maneira de fazer isso? Como? Da forma que estou fazendo não está funcionando.

3

3 Respostas 3

3

Não é possível simular um click no elemento <select>, porém existe uma forma de expandi-lo transformando-o em um listBox inserindo no <select> o atributo size:

$("#select").attr('size',3);

Adicionei também um evento mouseout para redefinir o <select>.

$(document).ready(function() {
	$(".selectOptions")
	.on("mouseover", function() {
		$("#select").attr('size',3)
    .addClass("expandido")
    .css("position","absolute");
	})
	.on("mouseout", function() {
		$("#select").attr('size',1)
    .css("position","relative");
	});
});
.expandido option{
padding: 0 10px;
}

.expandido option:hover{
background: blue;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectOptions" style="display: block; width: 100px; background: red; height: 30px;">
  Bla Bla
  <select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

UPDATE

Adicionei um class para melhor apresentação.

8
  • Pois é, mas como seria se temos uma div aí que não está sendo levando em conta a sua altura? 29/09/2017 às 15:40
  • @CarlosRocha Não entendi. Pelo código informado, essa div não tem altura, ou melhor, a altura a div é a altura do select que tem dentro dela.
    – Sam
    29/09/2017 às 15:53
  • sim, não tem. dessa forma, quando o select abre, ele fica encolhido dentro da div, entende. 29/09/2017 às 18:01
  • @CarlosRocha Entendi agora. A div tem uma altura fixa, é isso?
    – Sam
    29/09/2017 às 19:24
  • @CarlosRocha Ou melhor, não entendi. O select, quando abre, não respeita a altura da div em que ele está inserido.
    – Sam
    29/09/2017 às 19:43
1

tenta usar esta função:

$('select').hover(function() {

  $(this).attr('size', $('option').length);
}, function() {

  $(this).attr('size', 1);
});

demo: http://codepen.io/anon/pen/avdavQ

0

JS puro.

<html>
<head>
    <title>Drop on Hover</title>
    <script type="text/javascript">
        function DropList() {
            var n = document.getElementById("sel").options.length;
            document.getElementById("sel").size = n;
        }
    </script>
    <style>
    	select option:hover {
          background-color: #555;
          color: white;
      }
    </style>
</head>
<body>
    <div>
       <select id="sel" onmouseover="DropList()" onmouseout="this.size=1;">
            <option>Um</option>
            <option>Dois</option>
            <option>Três</option> 
            <option>Quatro</option> 
            <option>Cinco</option>
            <option>Seis</option>
            <option>Sete</option>
            <option>Oito</option>
        </select>
    </div>  
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .