CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
somejkuser
somejkuser

Reputation: 9040

select element not executing onclick for option in chrome

Here's my code:

<select style="color:#000000">
<option onclick="window.location.href='/state/FL/1/city/asc'">Sort by City ASC</option>
<option onclick="window.location.href='/state/FL/1/city/desc'">Sort by City DESC</option>
<option onclick="window.location.href='/state/FL/1/name/asc'">Sort by Name ASC</option>
<option onclick="window.location.href='/state/FL/1/name/desc'">Sort by Name DESC</option>
<option onclick="window.location.href='/state/FL/1/dist/asc'">Sort by Distance Nearest</option>
<option onclick="window.location.href='/state/FL/1/dist/desc'">Sort by Distance Furthest</option>

You cannot see the end select tag but its there. It's not changing the page when I click an option using chrome but it works for firefox.

Not quite sure how to fix this.

Upvotes: 1

Views: 102

Answers (3)

Nechemya Kanelsky
Nechemya Kanelsky

Reputation: 673

jQuery example:

$('#select').change(function(){
  var currentHref = $(this).find('option:selected').data('href');
  window.location.href = currentHref;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" style="color:#000000">
<option data-href="/state/FL/1/city/asc">Sort by City ASC</option>
<option data-href="/state/FL/1/city/desc">Sort by City DESC</option>
<option data-href="/state/FL/1/name/asc">Sort by Name ASC</option>
<option data-href="/state/FL/1/name/desc">Sort by Name DESC</option>
<option data-href="/state/FL/1/dist/asc">Sort by Distance Nearest</option>
<option data-href="/state/FL/1/dist/desc">Sort by Distance Furthest</option>
</select>

Upvotes: 0

baao
baao

Reputation: 73231

Onclick events on options are very inconsistent, so you should set an event on change, which in contrary, is supported in browsers. Also, inline javascript should be avoided - so give your select an id and do the following:

<select id="selectId" style="color:#000000">
<option value="/state/FL/1/city/asc">Sort by City ASC</option>
<option value="/state/FL/1/city/desc">Sort by City DESC</option>
<option value="/state/FL/1/name/asc">Sort by Name ASC</option>
<option value="/state/FL/1/name/desc">Sort by Name DESC</option>
<option value="/state/FL/1/dist/asc">Sort by Distance Nearest</option>
<option value="/state/FL/1/dist/desc">Sort by Distance Furthest</option>
</select>

JS:

document.getElementById('selectID').addEventListener('change', e => {
    window.location.href = e.target.value;
});

Upvotes: 1

adeneo
adeneo

Reputation: 318182

Options don't have mouse events in some browsers, which is why you should never use onclick handlers on options, but rather onchange handlers on the select.

With a proper event handler it would be

<select id="mySelect">
    <option value="/state/FL/1/city/asc">Sort by City ASC</option>
    <option value="/state/FL/1/city/desc">Sort by City DESC</option>
    <option value="/state/FL/1/name/asc">Sort by Name ASC</option>
    <option value="/state/FL/1/name/desc">Sort by Name DESC</option>
    <option value="/state/FL/1/dist/asc">Sort by Distance Nearest</option>
    <option value="/state/FL/1/dist/desc">Sort by Distance Furthest</option>
</select>

and then in a script tag

document.getElementById('mySelect').addEventListener('change', function() {

    window.location.href = this.value;

}, false):

Upvotes: 2

Related Questions