サンプルのJSにリンクを付けたい

Question

前提・実現したいこと

https://kodocode.net/design-css-selectlist/
こちらのサイトにある「カードタイプのセレクトボックスメニュー。」を実装したいのですが、
リンクの付け方が分かりません。

例）サンプルにある項目をクリックすると任意のページへ飛ぶ

HTML側でaタグを付けても全く動かないので、
JS側をいじる必要があるかと思いますが、見よう見まねでは動かなかったので
ご教示頂けると助かります。
どうぞよろしくお願いします。

該当のソースコード

$(document).ready(function(){
    
    var countOption = $('.old-select option').size();
    
    function openSelect(){
        var heightSelect = $('.new-select').height();
        var j=1;
        $('.new-select .new-option').each(function(){
            $(this).addClass('reveal');
            $(this).css({
                'box-shadow':'0 1px 1px rgba(0,0,0,0.1)',
                'left':'0',
                'right':'0',
                'top': j*(heightSelect+1)+'px'
            });
            j++;
        });
    }
    
    function closeSelect(){
        var i=0;
        $('.new-select .new-option').each(function(){
            $(this).removeClass('reveal');
            if(i<countOption-3){
                $(this).css('top',0);
                $(this).css('box-shadow','none');
            }
            else if(i===countOption-3){
                $(this).css('top','3px');
            }
            else if(i===countOption-2){
                $(this).css({
                    'top':'7px',
                    'left':'2px',
                    'right':'2px'
                });
            }
            else if(i===countOption-1){
                $(this).css({
                    'top':'11px',
                    'left':'4px',
                    'right':'4px'
                });
            }
            i++;
        });
    }
    
    // Initialisation
    if($('.old-select option[selected]').size() === 1){
        $('.selection p span').html($('.old-select option[selected]').html());
    }
    else{
        $('.selection p span').html($('.old-select option:first-child').html());
    }
    
    $('.old-select option').each(function(){
        newValue = $(this).val();
        newHTML = $(this).html();
        $('.new-select').append('<div class="new-option" data-value="'+newValue+'"><p>'+newHTML+'</p></div>');
    });
    
    var reverseIndex = countOption;
    $('.new-select .new-option').each(function(){
        $(this).css('z-index',reverseIndex);
        reverseIndex = reverseIndex-1;        
    });
    
    closeSelect();
    
    
    // Ouverture / Fermeture
    $('.selection').click(function(){
        $(this).toggleClass('open');
        if($(this).hasClass('open')===true){openSelect();}
        else{closeSelect();}
    });
    
    
    // Selection 
    $('.new-option').click(function(){
        var newValue = $(this).data('value');
        
        // Selection New Select
        $('.selection p span').html($(this).find('p').html());
        $('.selection').click();
        
        // Selection Old Select
        $('.old-select option[selected]').removeAttr('selected');
        $('.old-select option[value="'+newValue+'"]').attr('selected','');
        
        // Visuellement l'option dans le old-select ne change pas
        // mais la value selectionnée est bien pris en compte lors 
        // de l'envoi du formulaire. Test à l'appui.
        
    });
});

試したこと

onChangeを入れてoption valueにURLを入力

Comments

[cerfweb]

jQueryのバージョンを教えてください。

[salsdffass]

3.5.1です。
情報が抜けていて申し訳ございません。
どうぞよろしくお願いいたします。

[cerfweb]

HTMLやcssが提示されていませんが、冒頭に書かれたサイトにあるものそのままでしょうか。その場合、jQueryのバージョンが合わないのでそのままでは動かないと思いますが。

Answer 1

こんばんは。

全然試していませんが、以下を追加するとどうでしょうか。

$('.new-select').append('<div class="new-option" data-value="'+newValue+'"><p><a href="http://example.com">'+newHTML+'</a></p></div>');
                                                                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^           ^^^^