将 select 下拉列表转换为 <ul> 列表并突出显示 selected 类别

Question

我有以下 "Filter" select 下拉菜单

<select name="sPhrase" id="sPhrase" class="filter">
    <option value="bothlevel">BOTH LEVELS</option>
    <option value="xplorelevel">XPLORE LEVEL</option>
    <option value="xcellevel">XCEL LEVEL</option>
</select>
<input value="GO" class="submit" type="submit">

我已将其转换为 ul 列表并使用 css

使 select 下拉菜单不可见

<ul class="list">
    <li><a href="#" data-value="bothlevel">BOTH LEVELS</a></li>
    <li><a href="#" data-value="xplorelevel">XPLORE LEVEL</a></li>
    <li><a href="#" data-value="xcellevel">XCEL LEVEL</a></li>
</ul>
<input value="GO" class="submit" type="submit">

使用以下 jQuery 代码

$('select.filter').after('<ul class="list"></ul>');
$('select.filter option').each(function () {
$('ul.list').append('<li><a href="#" data-value="'
                     + $(this).val() + '">' 
                     + $(this).text()
                     + '</a></li>');
});

// set active to selection and sync

// update dropdown when links selected
$('ul.list > li > a').click(function(){
    $('ul.list > li').removeClass('active');
    $(this).parent().addClass('active');
    var e =  $(this).parent().index();
    $('select.filter option:eq('+e+')').prop('selected', true);

});
// update list when dropdown selected
$('select.filter').change(function() {
    var e =  $('option:selected', this).index();
    $('ul.list > li').removeClass('active');
    $('ul.list > li:eq('+e+')').addClass('active');
});

但是问题是，当 ul 列表中的类别 selected/clicked 并单击提交按钮时，一旦页面刷新，ul 列表不再突出显示之前 selected类别。

在页面加载内容后仍然突出显示类别的任何想法。

Answer 1

如果我们认为下拉列表在刷新页面后具有正确的值，您可以将它们设置为 dom 准备就绪，例如：

$(document).ready(function() {
    var e =  $('select.filter option:selected').index();
    $('ul.list > li:eq(' + e + ')').addClass('active');
});

将 select 下拉列表转换为 <ul> 列表并突出显示 selected 类别

Convert a select drop down into a <ul> list and have the selected category highlighted

jquery

html-select

html-lists