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

Asked

Viewed 953 times

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 code jQuery:

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

My goal is, when passing the mouse mouseover on the div, open the select.

Is there a way to do that? How? The way I’m doing is not working.

javascript jquery

  • Browsers do not allow this, so it is not possible.

  • Tobias, reference train of this negative for me to study?

  • https://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list

3 answers

3

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

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

I also added an event mouseout to redefine the <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

I added a class for better presentation.

  • Yeah, but how would it be if we had a div in there that’s not being reckoned with your height?

  • @Carlosrocha I didn’t understand. According to the code informed, this div has no height, or better, the height to div is the height of the select inside her.

  • yes, there isn’t. that way, when the select opens, it gets shrunk inside the div, you understand.

  • @Carlosrocha I get it now. The div has a fixed height, that’s it?

  • @Carlosrocha Or rather, I did not understand. The select, when it opens, does not respect the height of the div in which it is inserted.

  • Exactly that. It needs to override, otherwise we can’t see the options since train can’t calculate the height of the div by the size of the number of lis by its height

  • @Carlosrocha I made a change to the code. Take a look there and see if it was something like this you’re talking about.

  • only remove height of div

Show 3 more comments

1

tries to use this function:

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

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

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

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

0

JS pure.

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

Browser other questions tagged javascript jquery

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