Menu
I have the need to show the DropDown (HTML select element) expanded initially when it is loaded so that all the options in the DropDown are shown. I searched quite a bit, but suprisingly, I did not find an answer to such a simple problem. I am using ASP.NET MVC with jquery.
740
Here's a little mashup (that needs tweaking and optimising) but should get you started:
<div style="position:relative">
<select style="position: absolute">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("select").one("focus", function() {
this.size = this.options.length;
}).one("click", function() {
this.size = 1;
}).one("blur", function() {
this.size = this.options.length;
}).focus();
});
</script>
You Could write your HTML like this
<html>
<select id="abc">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</html>
Below, Is the JAVASCRIPT Function that expands automatically.
<script type="text/javascript">
$(document).ready(function() {
var dropdown = document.getElementById("abc");
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
