将选择下拉列表转换为 list and have the selected category highlighted

Question

我有以下“过滤器”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使选择下拉不可见

<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列表中选择/单击某个类别并单击提交按钮时，一旦页面刷新，ul列表将不再突出显示先前选择的类别。

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

Answer 1

如果我们认为Dropdown列表在刷新页面后具有正确的值，您可以在dom上设置它们，如：

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