Question

我有一个select元素，将在移动设备上显示

<form>
<select id="selectMe" >
    <optgroup label="Australia">
        <option value="AustCars">Australia Cars Report</option>
        <option value="AustBikes">Australia Bikes Report</option>                
    </optgroup>
    <optgroup label="New Zealand">                    
        <option value="NZCars">New Zealand Cars Report</option>
        <option value="NZBikes">New Zealand Bikes Report</option>                
    </optgroup>
</select>
</form>

有两点需要注意：

我希望在关闭时显示全名Australia Cars Report，以消除澳大利亚和新西兰之间的歧义。
我想在Cars Report打开时使用较短的版本select，因为iPhone选择器的全名Australia Cars Report太长了（不是实际名称，而是呈现为{ {1}}或类似的国家/地区隐含在Austr...rs Report。

我的方法（基于Change a select list display value upon selecting description）是在控件获得焦点时修改每个项的值，然后在失去焦点时取消修改。这就是我被卡住的地方。

我有两个问题：

我可以得到焦点事件，但没有'lostfocus'事件。我无法使用'已更改'事件，因为用户可能实际上没有更改选择。
我不知道如何从选项文本中添加和删除optgroup的值。我的意思是，我需要找到optgroup，它嵌套在Australia Cars Report下，因此我可以从显示文字中删除该字。

我可以使用javascript或jQuery或其他工具（如果适用）。开放给我提供一个简单的方法，我也忽略了这一点。

Answer 1

我可以获得焦点事件，但没有'lostfocus'事件。我无法使用'已更改'事件，因为用户可能实际上没有更改选择。

使用blur。

我不知道如何从选项文本中添加和删除optgroup的值。

有点不清楚，但我会冒一些猜测让你开始：

您需要为特定组提供唯一的ID才能访问它，例如

var fooElement = document.getElementById("foo")
您可以使用fooElement.selected
您可以使用fooElement.options[]获取所有选项。在此列表中添加和删除新的DOM元素将在HTML DOM中添加或删除它们。
可以使用option或.value找到.text的值。

尝试在HTML中查找select标记，并使用javascript与该类型的元素进行交互。祝你好运。

Answer 2

对于第一个问题：请参阅Steve的回复。

第二个问题：当模糊时，您可以将文本澳大利亚添加到选项中

$("select").blur(function(){
   $(this).html($(this).parent().html() + " " + $(this).html());
});

Answer 3

$('#selectMe option').click(function(){
    var myparent = $(this).parent();
    if (myparent.get(0).tagName == 'OPTGROUP'){
        $(this).text(myparent.attr('label') + ' ' + $(this).text());
    }
});

$('#selectMe').focus(function(){
    $('option', this).each(function(){
        var myparent = $(this).parent();    
        $(this).text($(this).text().replace(myparent.attr('label'),''));     
    });
})

在这里工作演示http://jsfiddle.net/GXvJB/11/

更改所选项目的文本以包括其父级optgroup

3 个答案: