如何在選項標簽上使用 href 並在選擇后更改頁面？

Question

我希望當用戶選擇一個選項時，它應該轉到另一個頁面。 我已經添加了下面的代碼。 請幫助我如何解決這個問題。

網頁格式

<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

這是我用來進行下拉選擇的 javascript 代碼。

$(".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

為了在選擇選項上重定向用戶，您可以這樣做：

<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>

Answer 2

您可以通過在 javascript 中使用location.href來實現。 對不起，我不好解釋，請看下面的代碼。

 $(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>

您可以將select和option標簽更改為您自己的。 因此，如果您想使用鏈接創建另一個option ，請在那些 javascript 上添加else if 。