jquery select change event when get selected option

I am trying to redirect on a specific url when user select an option

here is the code i am using

<select class="input-block-level" id="maqui" name="maqui">
                <option value="tela">Maquilero</option>
                <option value="textil">textil</option>
                <option value="tipo">tipo</option>
                    </select>

and the script

 $('#maqui').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    top.location.href="/ver/"+valueSelected;
});

I want to redirect to /ver/valueSelected

Answer

HTML

<select class="input-block-level" id="maqui" name="maqui" autocomplete="off">
                <option selected disabled>Please select an option</option>
                <option value="tela">Maquilero</option>
                <option value="textil">textil</option>
                <option value="tipo">tipo</option>
</select>

JS

$('#maqui').on('change', function (e) {
    window.location.href = "/ver/"+this.options[this.selectedIndex].value;
});

There are a few fallacies that you should be aware of, when using this method:

1. The event will only trigger onChange. Hence, the default disabled option in the select menu.

2. If the browser remembers his choice, the user won’t trigger the onChange event if he wants to select his previous choice. Hence the autocomplete="off"