WebbySmart
WebbySmart

Reputation: 726

Responsive Select Menu - Javascript only with onChange

I encountered a strange issue today. My responsive menu does not seem to be working on all mobile devices. On the Samsung S5 when I click on any option, the page loads, but the menu does not disappear/close. When I select something else, it does not redirect again.

I am trying to use a simple onchange script. Any help is appreciated.

<select id="mobile-menu" onChange="if (this.value) window.location.href = this.value;">
<option selected disabled>Navigation Menu</option>
<option value="link1.shtml">Home</option>
<option value="link2.shtml">Services</option>
<option value="link3.shtml">Testimonials</option>
<option value="link4.shtml">Faq</option>
</select>

Upvotes: 1

Views: 163

Answers (1)

joveyol
joveyol

Reputation: 68

The onChange attribute can cancel further normal input operations (like closing the select), if the JavaScript inside returns a "falsy" value. Try adding a return true; at the end of your onChange.

<select id="mobile-menu" onChange="if (this.value) window.location.href = this.value; return true;">
  <option selected disabled>Navigation Menu</option>
  <option value="link1.shtml">Home</option>
  <option value="link2.shtml">Services</option>
  <option value="link3.shtml">Testimonials</option>
  <option value="link4.shtml">Faq</option>
</select>

Upvotes: 1

Related Questions