Question

在移动版Safari和Chrome（iPhone和iPad）上动态选择选择菜单选项失败，但它适用于桌面Chrome。

重现：

1）访问移动设备上的http://www.panabee.com/show-hn?time=7-days。在桌面浏览器上，选择Last 7 days of Show HN选项。在移动设备上，Last 24 hours of Show HN option选择错误。

代码：

<select class='time_menu'>
    <option value='24-hours'>Last 24 hours</option>
    <option value='7-days'>Last 7 days</option>
    <option value='30-days'>Last 30 days</option>
</select>

$( document ).ready( function() {
            ... (other stuff)

    // Bind time menu
    var time_menu = $( '.content_body .time_menu' );
            ... (other stuff)

    // Display corresponding option in time menu
    var time = get_parameter( 'time' );
    var menu_option = time_menu.find( 'option[value="' + time + '"]' );
    if ( menu_option.length == 0 ) {
        menu_option = time_menu.find( 'option[value="24-hours"]' );
    }
    menu_option.attr( 'selected', true );
});

Answer 1

使用下拉菜单时遇到了类似的问题。我没有任何iOS设备可供测试，但也许我的解决方案适合您。最初我尝试通过将所选属性添加到HTML中来设置选择哪个选项，就像你正在做的那样但它不会接受它。我最终不得不改变通过DOM属性选择的选项。（使用selectedIndex）。

例如

var time_menu = document.querySelector('.time_menu'),
time = get_parameter('time'),
index = 0;

if(time == '7-days'){
    index = 1;
}else if(time == '30-days'){
    index = 2;
}

time_menu.selectedIndex = index;

无法突出显示/选择移动Safari（iPhone和iPad）上的选择选项，但在桌面上工作正常

1 个答案: