How can I use href on the option tag and change the page after selecting it?

Question

I want when a user to selects an option then it should go to another page. I have added the code below. Please help me how can i slove this issue.

html

<div class="mm-select">
                                    <select name="sources" id="sources" class="custom-select sources"
                                        placeholder="Source Type" onchange="location = this.value;">
                                        <option value="Mis-datos.html">Mis datos</option>
                                        <option value="Direcciones de envío">Direcciones de envío</option>
                                        <option value="Otros datos de interés">Otros datos de interés</option>
                                        <option value="Documentación de viaje">Documentación de viaje</option>
                                        <option value="Contraseña y seguridad">Contraseña y seguridad</option>
                                        <option value="Preferencias de comunicación">
                                            Preferencias de comunicación</option>
                                    </select>
                                </div>

Javascript

Here is the javascript code which thing I have used for making a dropdown select.

$(".custom-select").each(function () {
            var classes = $(this).attr("class"),
                id = $(this).attr("id"),
                name = $(this).attr("name");
            var template = '<div class="' + classes + '">';
            template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
            template += '<div class="custom-options">';
            $(this).find("option").each(function () {
                template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
            });
            template += '</div></div>';

            $(this).wrap('<div class="custom-select-wrapper"></div>');
            $(this).hide();
            $(this).after(template);
        });
        $(".custom-option:first-of-type").hover(function () {
            $(this).parents(".custom-options").addClass("option-hover");
        }, function () {
            $(this).parents(".custom-options").removeClass("option-hover");
        });
        $(".custom-select-trigger").on("click", function () {
            $('html').one('click', function () {
                $(".custom-select").removeClass("opened");
            });
            $(this).parents(".custom-select").toggleClass("opened");
            event.stopPropagation();
        });
        $(".custom-option").on("click", function () {
            $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
            $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
            $(this).addClass("selection");
            $(this).parents(".custom-select").removeClass("opened");
            $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
        });

Answer 1

In order to redirect user on select options you can do like this :

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="https://google.com">Google</option>
<option value="https://facebook.com">Facebook</option>
<option value="https://amazon.com">Amazon</option>
</select>

<script type="text/javascript">
  function handleSelect(elm)
  {
     window.location = elm.value;
  }
</script>