javascript - 从 iphone 的多选框中取消选择最后一个选项

Question

我正在使用以下 jquery 代码来限制多选框中的选择。它在任何 android 设备上工作正常，但在 iphone 中出现问题。

在 iPhone 中显示了警告消息，但最后选择的元素没有按预期取消选择。它应该显示选择的 3 个项目，但它显示在 iphone 中出现警报消息后选择的 4 个项目。任何提示表示赞赏。提前致谢。

<select id="mob-industry">
  <option value="1">Web Development</option>
  <option value="2">Architecture</option>
  <option value="3">Software Development</option>
  <option value="4">Hardware</option>
</select>


var last_valid_selection = null;
$('#mob-industry').change(function(event) {
    if ($(this).val().length > 3) {
        sweetAlert("","Only 3 Allowed","info");
          $(this).val(last_valid_selection);
    } else {
          last_valid_selection = $(this).val();
    }
 });

Answer 1

我猜你是从这样的地方得到你的方法的:How do you limit options selected in a html select box?

但我认为这是您真正想要/应该使用的:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<select id="mob-industry" multiple>
    <option value="1">Web Development</option>
    <option value="2">Architecture</option>
    <option value="3">Software Development</option>
    <option value="4">Hardware</option>
</select>

$('#mob-industry').bind("vmousedown", function(event) {
    var num_selected = $(this).find(":selected").length;
    if (num_selected == 3) {
        var last_selected_value = $(event.target).val();
        var select_array = $(this).val();
        if ($.inArray(last_selected_value, select_array) == -1) {
            alert("YOU SHALL NOT PASS!!!");
            event.preventDefault();
            return false;
        }
    }
});

Fiddle(为了与计算机兼容，使用 mousedown() 而不是 .bind("vmousedown")):https://jsfiddle.net/kpm0yLyt/1/

JsDoIt(移动模拟，虽然在您选择选项时会显示一些古怪的错误。忽略它。):http://jsdo.it/Macainian/GKxn

哦，顺便说一下，另一种方法(使用 click() 而不是 .bind("vclick") 与计算机兼容):https://jsfiddle.net/m49wr4t1/5/