Menu
Is there a click listener for the select tag? How do I trigger the select tag and show the dropdown box? Like this here
function myFunction(obj) {
var dropdown= document.getElementById("dropdown");
dropdown.click(); ???
}
<div class="dropdown">
<input type="text" onkeyup="myFunction()"/>
<select id="dropdown" onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
752
You can do like below:-
$(document).ready(function(){
$('input[type="text"]').on('keyup',function(){
$('#dropdown').attr('size',$('#dropdown option').length);
});
});<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dropdown">
<input type="text"/><br><br>
<select id="dropdown">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</body>
</html>Note:- You can use third-party plugin like below
editable-select
Working example:-
$(document).ready(function(){
$('input[type="text"]').on('keyup',function(){
$('#dropdown').editableSelect('show');;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<div class="dropdown">
<input type="text"/><br><br>
<select id="dropdown">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>you can't really do that with a selctbox. One workaround would be to set the selectbox size to a number greater than 0. You can expand this to get the exact height of the selectbox (= number of options) and set it as attribute size:
$(document).ready(function(){
$('input[type="text"]').on('keyup',function(){
$('#dropdown').focus().attr('size', 3);
});
});<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dropdown">
<input type="text"/>
<select id="dropdown">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</body>
</html>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