【问题标题】:jquery select multiple onchange selecting and deselecting option (on ipad)jquery选择多个onchange选择和取消选择选项(在ipad上)
【发布时间】:2012-10-22 08:36:09
【问题描述】:

我在 iPad 上选择和取消选择选项时遇到问题。

“按颜色购物”是一个没有值的选项,因此选择此选项时,它将显示所有项目。选择任何其他选项时,它将在该类别中显示项目。

我想要的只是:

  • 当您单击 .othervalue 选项时,应取消选择“按颜色购物”(.firstvalue),而应选择单击的选项
  • 当您单击 .firstvalue 选项时,它应该被选中,而所有其他选项 (.othervalue) 应该被取消选择

这是我尝试过的:

$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        if($("option.firstvalue").is(":selected")) {                
            $this.find('option:first').attr('selected', false);
        } else {                               
            $this.find('option:gt(0)').attr('selected', false);
        }
    });
});

**完整代码在:http://jsfiddle.net/GNpzq/**

我认为我应该使用 $('select').change() 因为 iPad 正确触发了该事件,但我不确定。

有人可以帮我处理这段代码吗?

谢谢!

编辑: 这是解决问题的代码,也许有人会使用。

$(function() {
    // select and deselect default OPTION for filters
    var firstSelectState = new Array;
    var optionsArray = new Array;

    $('select').change(function() {
        var id = this.id;
        if (!id) {
            id = Math.round(Math.random()*99999);
            this.id = id;
        }
        if (typeof(firstSelectState[id])=="undefined") firstSelectState[id] = this.options[0].selected;
        var tmpOptionsArray = new Array();
        for (var i = 1; i<this.options.length; i++) {
            tmpOptionsArray[i] = this.options[i].selected;
        }

        if (typeof(optionsArray[id])=="undefined") {
            optionsArray[id] = tmpOptionsArray;
        }

        var firstSelected = (firstSelectState[id]!=this.options[0].selected);
        var otherSelected = false;
        for (var i = 1; i<this.options.length; i++) {
            if (optionsArray[id][i]!=tmpOptionsArray[i]) {
                otherSelected = true;
                break;
            }
        }

        optionsArray[id] = tmpOptionsArray;
        if (firstSelected && !otherSelected) {
            for (var i = 1; i<this.options.length; i++) {
                this.options[i].selected = false;
            }
        } else {
            this.options[0].selected = false;
            firstSelectState[id] = false;
        }


    });
});

【问题讨论】:

  • 您想要什么与简单的选择菜单有何不同?

标签: jquery ipad events select option


【解决方案1】:

目前你正在阻止任何选择,你的条件是如果第一个选项被选中取消选择它,如果其他选项也被选中,请尝试以下操作:

$('select').change(function() {
    if (this.selectedIndex === 0) {
        $('option:gt(0)', this).prop('selected', false);
    } else {
        $('option:first', this).prop('selected', false);
    }
});

http://jsfiddle.net/LynCV/

【讨论】:

  • 差不多好了。尝试选择几个 .othervalue 并点击 ipad 上的“完成”按钮。然后选择“按颜色购物”点击“完成”。之后尝试选择一对.othervalue,你会发现无论你选择了多少,它只会选择最后一个。
  • @Mixa032 抱歉,我没有 ipad。这很奇怪,不会在 FF16 Mac 上发生。
  • 我刚刚测试了 IF 的 alert('1') 和 ELSE 的 alert('2')。似乎当您选择“按颜色购物”时,它总是执行 if(this.selectedIndex===0) {} 我猜是因为 selectedIndex 是 0,对吧?
  • @Mixa032 是的,selectedIndex 是从零开始的,对于多选,如果选择多个选项,则索引等于第一个选项的最低索引。例如选择4、5、6,则索引为4。
  • 您可以在 FF 中尝试,方法是按住键盘上的 COMMAND 并单击选项。当您选择“按颜色购物”时,您会看到无法取消选择它。你可以,但如果你释放 COMMAND 键 :) 在 iPad 上它的工作方式与你在键盘上按住命令键时相同。我想这就是他们设计 UI 的方式,用于同时选择多个选项,因为您在 iPad 上没有任何键可以按住:D
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-01
  • 1970-01-01
  • 2023-03-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-16
相关资源
最近更新 更多