show select options with jquery on demand

Question

I have some hidden selects and i want to show the options when clickin in a previous div with a fakeinput class

this is how I'm trying:

$('body').on('click','.fakeinput',function(){
    console.log(true);
    $(this).next('select').show().click();

});
$('body').on('blur','select',function(){
    $(this).hide();
});

But this would only hide/show the select item, it wont show the select's options

what am i missing here?

-EDIT-

Fiddle: http://jsfiddle.net/QAAYd/2/

It will be really good if you can put your rendered HTML here or JSFIDDLE will be best option either.. — rahularyansharma, Jul 01 '13 at 11:01
I need to hit the fakeinput first and then the select to see the select options, I want to see the options when clicking in the fake item — Toni Michel Caubet, Jul 01 '13 at 11:10
Oh you want the drop down to actually.. *drop down*? Please check this question: http://stackoverflow.com/questions/16056666/expand-select-dropdown — George, Jul 01 '13 at 11:15

score 1 · Answer 1 · answered Jul 01 '13 at 11:16

I'm not sure this is the best solution, but when I had a similar problem I gave the select a size attribute which made it look always open, and gave it a position: absolute so that it would "float" above all else.

$(this).next('select').attr('size',
    $(this).next('select').find('option').length)
       .show();

DEMO

score 0 · Answer 2 · answered Jul 01 '13 at 12:25

While it's a little more involved, you could translate the options into a div that's displayed (instead of the select) and then handle the click event on the displayed div elements:

$('body').on('click', 'form > div', function (e) {
    var self = $(this),
        options = self.find('select option'),
        div = $('<div />'),
        select = div.clone().addClass('pop-up-selector');
    $('.pop-up-selector').remove();
    options.each(function (i, elem) {
        var opt = $(elem);
        select.append(div.clone().data('value', opt.val()).text(opt.text()));
    });
    console.log(true);
    select.appendTo(self);
});
$('body').on('click', '.pop-up-selector > div', function (e) {
    var self = $(this),
        val = self.data('value'),
        text = self.text(),
        overlabel = self.parent().siblings('.overlabel');
    // display to user and store value for later
    overlabel.find('.fakeinput').data('value', val).text(text);
    // select corresponding option in select element in case you're using that later
    overlabel.find('select option').each(function (i, elem) {
        var opt = $(elem),
            selected = opt.val() === val;
        opt.attr('selected', selected);
    });
    window.setTimeout(function () {
        $('.pop-up-selector').remove();
    }, 0);
});

and some basic CSS so it looks a little better:

.pop-up-selector {
    background-color: #FFF;
}
.pop-up-selector > div:hover {
    background-color: #CCC;
}

Working demo: http://jsfiddle.net/QAAYd/5/

Toni Michel Caubet · Accepted Answer · 2013-07-11T20:06:04.890

0

My solution was to make the select with opacity:0 and to put it on top of a fake button...

select{ position:absolute; top:0; left:0; height;100%; width:100%;opacity:0; }

edited Jul 11 '13 at 20:06

answered Jul 05 '13 at 14:34

Toni Michel Caubet

19,333
56
202
378

show select options with jquery on demand

3 Answers3