5

我正在使用带有 optgroups 的选择在移动设备上进行一些导航。我使用 optgroup 的标签来指示它所属的部分 - 然后使用选项本身来指定子部分。

The problem is that in pretty much every browser I come across doesn't show the optgroup when the select is not in focus. 我通过编写以下 jQuery 解决了这个问题：

$(".Nav-Interior-Mobile select option:selected").each( function() {
    pageGroupLabel = $(this).parent('optgroup').attr('label');
    pageItemLabel = $(this).text();
    $(this).text(pageGroupLabel + " > " + pageItemLabel);
});
$('.Nav-Interior-Mobile select').focus( function() {
    $(this).find('option:selected').text(pageItemLabel); 
});
$('.Nav-Interior-Mobile select').blur( function() {
    $(this).find('option:selected').text(pageGroupLabel + " > " + pageItemLabel); 
});

这似乎适用于除 iOS 之外的所有应用程序。在 iOS 中，用于更改选择的 UI 不会反映用于焦点的新文本。我可以看到 Apple 用户界面上方的实际选择发生了变化——但他们的用户界面根本没有变化。

任何人都知道如何做到这一点？

模糊时它在这里工作：

http://files.secondstreetmedia.com/support/todd/blurred.PNG

并且在专注时无法工作（他们的 UI 应该只是说“Web”时仍然有“Branding > Web”）：

http://files.secondstreetmedia.com/support/todd/focused-2.jpg

这绝对是一个错误 - 如果您向下滚动然后在列表中备份 - 然后文本会更改 - 奇怪。

4

2 回答 2

0

尝试使用此处发布的 quickChange 插件：

在移动 Safari 下拉列表项选择框上使用“下一步”时选择/下拉的 onchange() JS 事件的奇怪行为

将插件代码粘贴到您的 Javascript 文件后，您应该能够将 onfocus 代码替换为：

$('.Nav-Interior-Mobile select').quickChange(function() { 
    $(this).find('option:selected').text(pageItemLabel);
});

并且您现有的 onblur 代码应该继续用于将值更改回来。

于 2013-01-08T19:58:32.000 回答
0

为什么首先要这样做？您不应该弄乱选择/选项的设计。您可以在“选择”顶部添加“标签”“div”，将“选择”不透明度设置为 0，如果要添加自定义文本，请在添加的“DIV”上执行。简而言之，它是这样的：

<div class="select-wrapper">
    <div class="color-label"> YOUR COLOR : <span id="selectedColor"></span></div>
    <select class="color-select">
        <option value="blue" selected="selected"> Blue</option>
        <option value="green"> Green</option>
        <option value="red"> Red</option>
        <option value="orange"> Orange</option>
        <option value="white"> White</option>
    </select>
</div>

CSS：

.select-wrapper {
    display: flex;
    position: relative;
    justify-content: center;
}

.color-label {
    position: absolute;
}
.color-select{
    opacity: 0;
}

查询脚本：

$(".color-select").on('change',function(){
    var optionSelected = $('>option:selected',this);
    $('#selectedColor').text(optionSelected.text());
  });

小提琴在这里：http: //jsfiddle.net/w8t39bm1/1/

于 2019-10-07T07:17:39.823 回答