javascript - 如何在 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。

我尝试过的一些事情都在 fiddle 中，只需要取消注释相关部分，看看它们会发生什么。他们中的大多数在 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);
    });
    });