使用 jquery 按需显示选择选项答案

【问题标题】：show select options with jquery on demand使用 jquery 按需显示选择选项
【发布时间】：2013-07-01 11:01:00
【问题描述】：

我有一些隐藏的选择，我想在使用 fakeinput 类单击前一个 div 时显示选项

这就是我正在尝试的方式：

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

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

但这只会隐藏/显示选择项，不会显示选择项的选项

我在这里错过了什么？

-编辑-

小提琴：http://jsfiddle.net/QAAYd/2/

【问题讨论】：

如果你能把你渲染的 HTML 放在这里，那就太好了，否则 JSFIDDLE 也是最好的选择..
jsfiddle.net/QAAYd/2
对我来说很好，我可以看到所有选项。
我需要先点击fakeinput再点击select才能看到选择选项，我想在点击fake item的时候看到选项
也为我工作..

标签： jquery select toggle

【解决方案1】：

我不确定这是不是最好的解决方案，但是当我遇到类似问题时，我给 select 一个 size 属性，让它看起来总是打开的，并给它一个 position: absolute 以便它会“浮动”高于一切。

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

DEMO

【讨论】：

【解决方案2】：

虽然涉及更多一些，但您可以将选项转换为显示的 div（而不是 select），然后处理显示的 div 元素上的点击事件：

$('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);
});

和一些基本的 CSS，让它看起来更好一点：

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

工作演示：http://jsfiddle.net/QAAYd/5/

【讨论】：

【解决方案3】：

我的解决方案是使用 opacity:0 进行选择并将其放在假按钮的顶部...

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

【讨论】：