Question

我有一个HTML选择标记

<select class="filter">
   <option values="1">One</option>
   <option values="2">Two</option>
   <option values="3">Three</option>
</select>

我希望将不同的选项显示为屏幕大小超过481px的<a>超链接的水平列表，并在单击/选择超链接时指定与select标记中相同的选项值，并作为下拉列表屏幕尺寸为480px和波纹管。

我在网上看过一些示例，其中几个<a>元素的列表将使用jquery转换为看似下拉列表的内容，但它真正做的是将所有这些元素叠加在一起并将它们叠加在一起并显示点击时的下拉列表。

Answer 1

涉及3个步骤;

1）使用jQuery将选择下拉列表复制到无序的链接列表中，

2）使用媒体查询在显示列表和下拉列表之间切换，

3）使用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 first item as active on ready
$('ul.list li:eq(0)').addClass('active');

// set active to selction 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');
});

注意：如果你的html是静态的，并且你知道它不会改变，或者不太可能改变，你可以删除与步骤1相关的所有JavaScript，并在你的html中手动创建ul链接列表。 / p>

jsFiddle working example

Answer 2

有几种方法可以实现这一目标。

1）使用@media规则来显示/隐藏执行相同功能的不同元素。

根据视口宽度，您可以显示/隐藏select和ul。 See Example - 调整小提琴输出窗口

2）使用jQuery

使用javascript简单地获取option中的select并将其转换为ul - See Example - 全部归功于this question

根据屏幕大小将选择下拉列表转换为列表

2 个答案: