How to simulate the event click on a select when hovering over a div?

Question

How to simulate the event click on a select when hovering over a div?

Navigation

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

1

I have the following 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>

and the following jQuery code:

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

My goal is to pass the mouseover mouse over the div , open select .

Is there a way to do this? As? The way I'm doing is not working.

javascript jquery

asked by anonymous 29.09.2017 / 15:53

3 answers

Why variable increment function does not work in AngularJS? Am I not accessing the variable correctly? C # MVC5 EF - How not to lose data after ModelState validation?

score 3 · Answer 1

It is not possible to simulate a click on the <select> element, but there is a way to expand it by transforming it to a listBox by inserting <select> attribute size :

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

I also added a mouseout event to reset <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><divclass="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

I've added class for better presentation.

score 1 · Answer 2

1

try to use this function:

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

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

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

demo: link

29.09.2017 / 16:17

score 0 · Answer 3

Pure JS.

<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>