Clearing Drop-down Select Value On Page Exit So Back Button Return May Reselect

I am, basically, answering the question here, but perhaps someone has another idea. You can use an onpopstate function, but I find this much simpler to deal with and cross-browser

Solution 1:

Listening for the click event is not ideal for a couple of reasons:

• It's triggered when you click the select to open it, not when you actually select an option. So your code clears the value when you open the select which results in a bit of jerkiness.
• It's not triggered if you use the keyboard to select a value.

So I'd instead suggest using the blur event:

$('#CitySelect').on('blur', (e) => (e.target.value = ''));

Immediately after selecting the value, the select field will still have the new value but as soon as you leave the field ("blur" it), the value will reset.

Check out this fiddle