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

Question

这是一个 jsfiddle：http://jsfiddle.net/JQnUs/4/

HTML：

<div class="problem-select">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input type="hidden" value="1" />    
</div>

<div class="overlapping-div">

</div>

<div class="hover-here">Hover here</div>

<input class="other-input" type="text" />

CSS：

.problem-select {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.overlapping-div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 100;
    display: none;
}

.hover-here {
    position: absolute;
    right: 70px;
    top: 0px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

.other-input {
    position: absolute;
    top: 200px;
    left: 0px;
}

jQuery（使用 1.8.2）：

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();
}

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

我尝试过的一些事情是在小提琴中，相关部分只需要取消注释即可查看它们会发生什么。他们中的大多数都在 Firefox 中工作，而没有一个在 safari 中工作。

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

如何在 chrome、safari、ie7-9 和 firefox 中阻止选项列表显示在红色 div 上，同时如果红色 div 没有覆盖选择框，则不影响选择框的功能？

我试图避免使用使用其他 html 元素重新创建选择框的插件来执行此操作，因为根据我的经验，它们不适用于更改定期在各种事件上触发的功能的应用程序。

Answer 1

我在 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);
    });
    });

Answer 2

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

在 .hover-here div 悬停时，我将一个类添加到添加以下规则的选择中：

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

（取自this page）

尚未在所有浏览器中对其进行测试，但在 Chrome 和 IE9 中似乎可以正常工作:)

自己测试：http://jsfiddle.net/JQnUs/6/

编辑 毕竟，在 IE9 中似乎表现不佳，它仍然可以运行，但下拉列表之后变得混乱.. 寻找修复。