CODEWITHSUNDEEP
jqueryeventsselectclick
Amj
Amj

Reputation: 73

How to handle the event when a select drops down and not when selecting an option

Background:

I have a select element with some options in it, standard stuff.

I have to style the select so the default dropdown arrow is replaced with an icon - straightforward stuff again. I've done this using the ::after pseudo class on the select's container.

The background colour of the select is red and the dropdown icon is white.

I have a standard jQuery "click" event handler bound to the select.

Current behaviour:

When the user clicks on the select to pick an option, the background color of the select is white so the icon blends into the background and can't be seen.

The click event fires.

When you select an option, the click event fires again.

Expected behaviour:

I want to change the color of the drop down arrow to red until the user focuses away. I plan to do this by adding a class to the select's parent that changes the color.

I only want to handle the event when the user clicks the select to drop it down and not when the user clicks on an option.

Question

Is this possible ?

Other comments

Many thanks

Upvotes: 0

Views: 74

Answers (1)

Aditya Thakur
Aditya Thakur

Reputation: 2610

You can use focus and blur events to

let select = document.querySelector('select')
select.addEventListener('focus', (event) => {
select.parentElement.classList.add('color-red');
}
select.addEventListener('blur', ()=>{
if(select.parentElement.classList.contains('color-red'){
select.parentElement.classList.remove('color-red')
}

Upvotes: 0

Related Questions