Javascript 如何在safari中以编程方式隐藏打开的选择框中的选项？

下面是一个JSFIDLE：

HTML:

jQuery（使用1.8.2）：

如果单击选择框将其打开，然后将光标悬停在右侧的div上，而不先从选择框中选择选项或单击页面上的其他位置，则选择选项仍显示在显示的红色div的顶部

我试过的一些东西是在小提琴和相关的部分只是需要取消注释，看看会发生什么。它们中的大多数在firefox中工作，没有一个在safari中工作

我在实际应用程序中面临的另一个问题是，选择框可能在红色div下面，也可能不在红色div下面，因此解决方案需要能够确定选择框选项是否会遮挡红色div，或者继续允许正常使用（选择选项）。（在应用程序中，在页面上执行其他操作时，可以保持红色div可见）

如果选择框未包含在红色div中，我如何停止在chrome、safari、ie7-9和firefox的红色div上显示选项列表，同时又不影响选择框的功能？

---

我试图避免使用一个插件，该插件使用其他html元素重新创建一个选择框，因为根据我的经验，它们不能很好地与定期更改各种事件触发的函数的应用程序配合使用。

我找到了一个可能的解决方案：

在.hover here div悬停时，我向select添加了一个类，该类添加了以下规则：

.hide-select {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

（摘自）

还没有在所有浏览器中测试过，但在Chrome和IE9中似乎效果不错：）

自己测试：

编辑

---

在IE9中似乎做得不太好，毕竟，它仍然可以正常工作，但后来下拉菜单变得一团糟。。正在寻找修复方法。

在Mobile Safari中测试应用程序时，我遇到了完全相同的问题。显然.hide（）不起作用，因为Mobile Safari将下拉选择更改为“弹出”选择。作为一种妥协，我选择了简单地禁用不需要的选项：

    $(document).ready(function(){
        $("#yourSelectDiv").change(function(){
        //target an attribute from your first drop down)
        if ( $(“#yourSelectID option:selected”).attr(“data-custom”) == ’yourCustomAttribute’){
        //reset the second drop down to default position
        $(“#yourOtherSelectID”).get(0);
        //set disabled to true or false on the second drop down 
        $("#yourOtherSelectID option[value='yourSelectValue']").attr('disabled',false);
        $("#yourOtherSelectID option[value='yourSelectValue']").attr('disabled’,true);
    });
    });

---

相关：（虽然没有告诉你太多你还没有想出来。）为了解释为什么这很难，考虑在手机浏览器中显示<代码> <代码>。这不是一个下拉列表；这是一个充满整个屏幕的模式显示。从浏览器的角度来看，选择框的视觉行为与页面的其余部分是分离的，因为选择行为可能因平台而异。我并不是说你所做的是不可能的，甚至是不合适的；我只是想给你一些背景说明，为什么浏览器供应商没有让这件事变得容易。感谢你的想法（我没有想到使用溢出隐藏），但在safari这是我的主要问题浏览器中，它似乎什么都做不了。哦，真遗憾。我认为问题在于，实际的下拉列表是由浏览器呈现的，而不是DOM中的内容。通常很难控制这些。嗯，这证实了这可能是不可能做到的：这个主题主要集中在我的解决方案7所使用的最新版本的chrome中是否工作。我不确定它是否证实了任何关于狩猎的事情。你在看哪一块？

jQuery(document).ready(function() {
    jQuery(".hover-here").hover(function(){ showDiv(); }, function(){ hideDiv(); });
    //Used in potential solution 7...
    //jQuery("select").change(function(){ jQuery(this).siblings('input').val(jQuery(this).val()); });
});

function showDiv() {
    //Potential solution number 1... (does't work in chrome or safari)
    //jQuery('select').blur();

    //Potential solution number 2... (leaves lines on top of the red div)
    //jQuery('option').hide();

    //Potential solution number 3... (doesn't work in safari and still has the issue of working out which selects to hide)
    //jQuery('select').hide();

    //Potential solution number 4... (doesn't hide drop down options at all and would also need to know which selects to disable)
    //jQuery('select').attr('disabled','disabled');

    //Potential solution number 5... (doesn't work at all)
    //jQuery(".hover-here").click();

    //Potential solution number 6... (doesn't work in safari or chrome)
    //jQuery('.other-input').focus();

    //Potential solution number 7... (doesn't work in safari)
    //innerHtml = jQuery('.problem-select').html();
    //value = jQuery('.problem-select').children("input").val();
    //jQuery('.problem-select').html(innerHtml);
    //jQuery('.problem-select').children("select").val(value);


    jQuery('.overlapping-div').show();
}

function hideDiv() {
    //Potential solution number 2 cont...
    //jQuery('option').show();

    //Potential solution number 3 cont...
    //jQuery('select').show();

    //Potential solution number 4 cont...
    //jQuery('select').attr('disabled',null);

    jQuery('.overlapping-div').hide();
}

.hide-select {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    $(document).ready(function(){
        $("#yourSelectDiv").change(function(){
        //target an attribute from your first drop down)
        if ( $(“#yourSelectID option:selected”).attr(“data-custom”) == ’yourCustomAttribute’){
        //reset the second drop down to default position
        $(“#yourOtherSelectID”).get(0);
        //set disabled to true or false on the second drop down 
        $("#yourOtherSelectID option[value='yourSelectValue']").attr('disabled',false);
        $("#yourOtherSelectID option[value='yourSelectValue']").attr('disabled’,true);
    });
    });