jQuery select link not working on Chrome

I want to have an option in select that takes a user to other page after clicking it. Below function works on Edge and Mozilla, on Chrome not:

<select>
    <option value="@Url.Action("Home")" id="some-id"> Take me somewhere
    </option>
</select>

<script>
    $('#some-id').click(function () {
        window.location.href = this.value; 
    });
</script>

Please help!

2 answers

  • answered 2018-08-16 18:03 Arup Rakshit

    I'd rewrite your code:

    <select id='some-id'>
        <option value="@Url.Action("Home")" > Take me somewhere
        </option>
    </select>
    
    <script>
        $('#some-id').on('change', function () {
            window.location.href = this.value; 
        });
    </script>
    

  • answered 2018-08-16 18:11 Mārcis P

    You must take a value from select Element. That way you can check if select value has changed and take user selected value.

    <select id='some-id'>
        <option value="@Url.Action("Home")" > Take me somewhere
        </option>
    </select>
    
    <script>
        $('#some-id').on('change', function (event) {
            window.location = event.target.value; 
        });
    </script>
    

    P.s.: Better not to use this keyword but take it from event target. As using this can get You in trouble.