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或继续允许正常使用（选择选项）。（在应用程序中，可以在页面上执行其他操作时保持红色div可见。）

如何停止显示chrome，safari，ie7-9和firefox中红色div的选项列表，同时不影响选择框的功能，如果它不被红色div覆盖？

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

Answer 1

我在Mobile Safari中测试应用程序时遇到了同样的问题。显然.hide（）不起作用，因为Mobile Safari将下拉选项更改为＆＃34; pop over＆＃34;选择。作为妥协，我选择简单地禁用不需要的选项：

    $(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时，我在select中添加了一个类，它添加了以下规则：

.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中似乎没有这么好，它仍然可以正常运行，但之后的下拉动画正在搞砸......寻找修复。

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

2 个答案: