Question

184

Open Select using Javascript/jQuery?

rated 0 times [ 187] [ 3] / answers: 1 / hits: 88958 / 15 Years ago, tue, january 12, 2010, 12:00:00

Is there a way to open a select box using Javascript (and jQuery)?

<select style="width:150px;">

    <option value="1">1</option>

    <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu nunc, rhoncus ac dignissim at, rhoncus ac tellus.</option>

    <option value="3">3</option>

</select>

I have to open my select, cause of IE bug. All versions of IE (6,7,8) cut my options.
As far as I know, there is no CSS bugfix for this.
At the moment I try to do the following:

var original_width = 0;

var selected_val = false;



if (jQuery.browser.msie) {

    $('select').click(function(){

        if (selected_val == false){

            if(original_width == 0)

                original_width = $(this).width();



            $(this).css({

                'position' : 'absolute',

                'width' : 'auto'

            });

        }else{

            $(this).css({

                'position' : 'relative',

                'width' : original_width

            });

            selected_val = false;

        }

    });



    $('select').blur(function(){

        $(this).css({

            'position' : 'relative',

            'width' : original_width

        });

    });



    $('select').blur(function(){

        $(this).css({

            'position' : 'relative',

            'width' : original_width

        });

    });

            

    $('select').change(function(){

        $(this).css({

            'position' : 'relative',

            'width' : original_width

        });

    });



    $('select option').click(function(){

        $(this).css({

            'position' : 'relative',

            'width' : original_width

        });

    

        selected_val = true;

    });



}

But clicking on my select the first time will change the width of the select but I have to click again to open it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devane

Add To Favorites

Follow

Total Points: 451

Total Questions: 88

Total Answers: 100

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

answered 15 Years ago raymondd · Accepted Answer

Okay, I found another way fixing this problem.
Here is the fix:

Please give me feedback! I'm kind of proud on myself ;)

$(document).ready(function() {

    if (jQuery.browser.msie) {

            select_init();

    }

});





function select_init () {

    var selects = $('select');

    for (var i = 0; i < selects.length; i++) {

        _resizeselect.init(selects[i]);

    }

}





var _resizeselect = {

    obj : new Array(),

    init : function (el) {

        this.obj[el] = new resizeselect (el);

    }

}



function resizeselect (el) {



    this.el = el;

    this.p = el.parentNode;

    this.ht = el.parentNode.offsetHeight;

    var obj = this;

    this.set = false;



    el.onmousedown = function () {

        obj.set_select(mousedown);

    }

    el.onblur = function () {

        obj.reset_select(blur);

    }

    el.onchange = function () {

        obj.reset_select(change);

    }



}



resizeselect.prototype.set_select = function (str) {



    if (this.set) {

        this.set = false;

        return;

    }



    this.el.style.width = auto;

    this.el.style.position = absolute;

    this.p.style.height = this.ht + px;

    this.p.style.zIndex = 100;

    this.set = true;

    this.el.focus();

}



resizeselect.prototype.reset_select = function (str) {

    this.el.style.width = ;

    this.el.style.position = ;

    this.p.style.height = ;

    this.p.style.zIndex = 1;

    this.set = false;

    window.focus();

}