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 >
                                    <select name="sources" id="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 >';
            template  = '<span >'   $(this).attr("placeholder")   '</span>';
            template  = '<div >';
            $(this).find("option").each(function () {
                template  = '<span class")   '" data-value="'   $(this).attr("value")   '">'   $(this).html()   '</span>';
            });
            template  = '</div></div>';

            $(this).wrap('<div ></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());
        });

CodePudding user response：

you can make it by using location.href in javascript. sorry i am bad in explaining something, just see my code below.

$(window).load(function(){
  $("#alas").change(function() {
    console.log($("#alas option:selected").val());
      if ($("#alas option:selected").val() == 'about') {
         location.href = "https://www.w3schools.com";
         }
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<select id="alas">
     <option>HOME</option>
     <option value="about">ABOUT</option>
</select>
          

you can change the select and option tag to your own. so if you want to make another option with link, add the else if on those javascript.

CodePudding user response：

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>