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

Question

Here's a 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 (using 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();
}

If you click on the select box to open it, then hover over the div to the right without selecting an option from the select box or clicking elsewhere on the page first, then the select options still show up on top of the red div that appears.

Some of the things I've tried are in the fiddle and and the relevant sections just need to be uncommented to see what happens with them. Most of them work in firefox and none of them work in safari.

An additional issue that I am facing in the actual application is that the select box may or may not be underneath the red div, so the solution needs either to be able to determine if the select box options will obscure the red div or continue to allow normal use (selecting options). (In the application it is possible to keep the red div visible whilst doing other actions on the page).

How can I stop the options list showing over the red div in chrome, safari, ie7-9 and firefox whilst not affecting the functionality of the select box if it is not covered by the red div?

I am trying to avoid using a plugin that recreates a select box using other html elements to do this as in my experience they don't work well with applications that change the functions that get triggered on various events regularly.

Answer 1

I ran into the exact same problem while testing an application in Mobile Safari. Apparently .hide() does not work because Mobile Safari changes a dropdown select into a "pop over" select. As a compromise, I chose to simply disable the unwanted options:

    $(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

I found a possible solution:

On hover of the .hover-here div, I add a class to the select that adds the following rules:

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

(taken from this page )

Haven't tested it in all browsers yet, but in Chrome and IE9 it seems to work fine :)

Test for yourself: http://jsfiddle.net/JQnUs/6/

edit Doesn't seem to do so well in IE9 after all, it still functions but the dropdown is getting messed up afterwards.. looking for a fix.