Question

我的下拉列表在桌面上工作正常，但不适用于移动版。如果我选择其中一个选项（A，B，C aso。），对于移动设备，它对显示的框没有任何影响。

为什么呢？移动设备是否需要提交按钮？

剧本：

var $btns = $('.btn').click(function () {
    if (this.id == 'all') {
        $('#parent > span').fadeIn(250);
    } else {
        var $el = $('.' + this.id).delay(50).fadeIn(200);
        $('#parent > span').not($el).fadeOut(0);
    }
    $btns.removeClass('active');
    $(this).addClass('active');
})

jsfiddle

Answer 1

在click元素上放置一个option处理程序不是一个好主意，因为它没有得到广泛支持，事实上它在Chrome中根本不起作用，更不用说移动浏览器了，这是什么导致你的问题。

而是挂钩change元素上的select事件，并从所选id中读取option属性。你需要修改你的逻辑，如下所示：

$('select').change(function () {
    var selectedId = $('option:selected', this).prop('id')
    if (selectedId == 'all') {
        $('#parent > span').fadeIn(250);
    } else {
        var $el = $('.' + selectedId).delay(50).fadeIn(200);
        $('#parent > span').not($el).fadeOut(0);
    }
})

Updated fiddle

同样适用于尝试设置所选option元素的样式 - 将其留给浏览器设置样式，因为大多数CSS属性都不适用于它们。

下拉选择无法正常用于移动设备

1 个答案: