如何实现option选中跳转？自定义下拉页面跳转问题解决

我想要用户选择下拉选项后自动跳转到对应目标页面，已经写了HTML结构和自定义下拉的JavaScript代码，但目前跳转效果无法实现，代码如下：

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代码 #

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

问题原因 #

1. 原生select事件未触发：JS代码把原生<select>隐藏了，用户实际点击的是自定义生成的.custom-option元素，原生select的onchange事件根本不会被触发，所以原来写的onchange="location = this.value;"完全无效。
2. 选项value不合法：除第一个选项外，其他选项的value都是纯文本（比如Direcciones de envío），不是有效的页面路径，就算触发跳转，浏览器也无法识别目标地址。

解决办法 #

步骤1：修正所有选项的value值 #

把每个<option>的value改成对应的页面路径，格式和第一个选项统一，示例：

<option value="Direcciones-de-envio.html">Direcciones de envío</option>
<option value="Otros-datos-de-interes.html">Otros datos de interés</option>
<option value="Documentacion-de-viaje.html">Documentación de viaje</option>
<option value="Contrasena-y-seguridad.html">Contraseña y seguridad</option>
<option value="Preferencias-de-comunicacion.html">Preferencias de comunicación</option>

步骤2：在自定义选项的点击事件中添加跳转逻辑 #

修改.custom-option的点击事件代码，在最后新增跳转逻辑：

$(".custom-option").on("click", function () {
    var targetUrl = $(this).data("value"); // 获取选中项的目标路径
    $(this).parents(".custom-select-wrapper").find("select").val(targetUrl);
    $(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());
    
    // 新增：跳转到目标页面
    if (targetUrl && targetUrl.trim() !== "") {
        window.location.href = targetUrl;
    }
});

内容的提问来源于stack exchange，提问作者Monirul Islam