html select arrow down

<select class="select1"> <option href="#">Dropdown</option> <option href="#">Dropdown</option> <option href="#">Dropdown</option> <option href="#">Dropdown</option> </select> <style> .select1{ border: none; background-color: cyan; padding: 2px; } .select1:hover{ background-color: blue; padding: 10px; } </style>

select li element with arrow keys (up and down) using javascript

var li = $('#list > li');
var liSelected;
$(window).on('keydown', function(e){
var selected;
if(e.which === 40){
	if(liSelected){
		liSelected.removeClass('background');
		next = liSelected.next();
		if(next.length > 0){
			liSelected = next.addClass('background');
			selected = next.text();

		}else{
			liSelected = li.eq(0).addClass('background');
			selected = li.eq(0).text();
		}
	}else{
		liSelected = li.eq(0).addClass('background');
			selected = li.eq(0).text();
	}
}else if(e.which === 38){
	if(liSelected){
		liSelected.removeClass('background');
		next = liSelected.prev();
		if(next.length > 0){
			liSelected = next.addClass('background');
			selected = next.text();

		}else{

			liSelected = li.last().addClass('background');
			selected = li.last().text()
		}
	}else{

		liSelected = li.last().addClass('background');
		selected = li.last().text()
	}
}
console.log(selected)
});

/*HTML FILE CODE

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" href="">
	<style>
		.background{
			background: hsla(0, 100%, 0%, 0.4);
		}
	</style>
</head>
<body>
	<input type="text" class="form-control" id="searchProduct" placeholder="Search..." />
	<ul id="list">
    <li id="match1" class="itemList">1</li>
    <li id="match2" class="itemList">2</li>
    <li id="match3" class="itemList">3</li>
	</ul>
</body>
</html>





*/

Posted by: Guest on September-08-2021

Answers for "html select arrow down"

Code answers related to "html select arrow down"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us