如何在iOS6中关闭选择器的onchange事件下拉列表

How to close dropdown on onchange event of selector In iOS6?

本文关键字：选择器 onchange 事件 下拉列表 iOS6      更新时间：2023-09-26

我正在开发与worklight的混合应用程序。

当点击选择控件时，会弹出一个本地下拉框。现在我在这个选择上绑定了onchange事件，所以当我选择任何选项时，事件都会被触发，但是下拉菜单直到我点击完成按钮才会淡出。

我用('select').blur()来克服，它在Android上工作得很好，但在iOS6上不行。

我想用onchange来淡出下拉菜单。

代码:

<select id="myID" onchange="myFun()">;
function myFun(){
    $('select').blur();
}
or
function myFun(){
    $('#myID').blur();
}

有什么可能的解决方案?谢谢。

似乎在iOS中你不能在select元素上使用.blur()，该事件将被忽略。

注意:在iOS中，用户期望点击完成按钮。为什么要引入意想不到的 交互和行为(=一开始就没有由操作系统提供)，从而使最终用户感到困惑呢?例如，如果用户错误地选择了该怎么办?而不是能够当场纠正，他/她将被迫再次点击并再次选择…我建议保持默认行为

更新的例子:而不是从DOM中删除select并重新引入它，我发现了这个。
不过，根据问题，以下内容仅适用于iOS6。

<div id="mySelectDiv">
    <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>
Selected option: <input type="text" id="selectedOption"/>
JavaScript

function wlCommonInit(){
    $("#mySelect").bind('change', changeValue);
}
function changeValue() {
    var mySelectedIndex = $("#mySelect option:selected").index();
    $("#selectedOption").val($("#mySelect option:selected").text());
    if($("#mySelect").is("select")){
        var fakeSelect = $("#mySelect").clone();
        $("#mySelect").replaceWith(fakeSelect);
        $("#mySelect").bind('change', changeValue);
        $("#mySelect").prop('selectedIndex', mySelectedIndex);
    }
}

虽然我之前的答案只适用于iOS6，但使用lukewhyte的iOS7- select - element - auto - close插件，以下答案适用于我的iOS6和iOS7。

只需将插件中提供的JS代码放在项目中，并将其包含在index.html中，

<script src="js/select.js"></script>

: 

<div id="mySelectDiv">
    <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>
JavaScript

function wlCommonInit(){
    $('#mySelect').iOSSelect();
    $("#mySelect").bind('change', changeValue);
}
function changeValue() {
    $("#selectedOption").val($("#mySelect option:selected").text());
}
相关文章：