How can I hide the options in an open select box programmatically in 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.

Related: http://stackoverflow.com/questions/10851882/close-a-select-dropdown-list-programatically-with-javascript-jquery (doesn't tell you too much you haven't already figured out, though.) — apsillers, Nov 29 '12 at 15:08
To give an idea of *why* this is difficult, consider the display of a ` — apsillers, Nov 29 '12 at 15:14

score 3 · Answer 1 · answered Nov 26 '15 at 12:27

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

score 0 · Answer 2 · answered Nov 29 '12 at 15:14

0

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.

answered Nov 29 '12 at 15:14

Stephan Muller

27,018
16
85
126

Thanks for the idea (I hadn't thought of using overflow hidden), but it doesn't seem to do anything at all in safari which is my main problem browser. – Helen Nov 29 '12 at 15:17
Oh, that's a shame. I think the problem is that the actual dropdown is a thing rendered by the browser, that is not in the DOM. It's often very hard to control these. – Stephan Muller Nov 29 '12 at 15:20
Hmm, this confirms it probably can't be done: http://stackoverflow.com/questions/10851882/close-a-select-dropdown-list-programatically-with-javascript-jquery – Stephan Muller Nov 29 '12 at 15:22
That topic mainly focuses on it working or not working in the latest version of chrome which my solution number 7 works in. I'm not sure it confirms anything about safari. Which bit are you looking at? – Helen Nov 29 '12 at 15:27

How can I hide the options in an open select box programmatically in safari?

2 Answers2