1

我有一个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太长（不是实际名称，而是呈现为Austr...rs Report或类似），并且国家/地区隐含在optgroup.

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

我这里有两个问题：

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

如果适用，我可以使用 javascript 或 jQuery 或其他工具。对我也忽略的简单方法的建议持开放态度。

4

3 回答 3

1

我可以获得焦点事件，但没有“失去焦点”事件。我不能使用 'changed' 事件，因为用户可能实际上没有更改选择。

使用blur.

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

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

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

    var fooElement = document.getElementById("foo")

  • 您可以使用fooElement.selected
  • 您可以使用fooElement.options[]. 在此列表中添加和删除新的 DOM 元素将在 HTML DOM 中添加或删除它们。
  • option可以使用.value或找到an 的值.text。

尝试查找selectHTML 中的标记，以及与该类型元素交互的 javascript。祝你好运。

于 2012-07-05T04:17:05.467 回答
1

第一个问题：见史蒂夫的回答。

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

$("select").blur(function(){
   $(this).html($(this).parent().html() + " " + $(this).html());
});
于 2012-07-05T04:23:50.567 回答
1 
$('#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/

于 2012-07-05T04:34:06.263 回答