Question

我有一些隐藏的选择，我希望在使用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/

Answer 1

我不确定这是最好的解决方案，但是当我遇到类似的问题时，我给了select一个size属性，使其看起来始终打开，并给它一个{{1这样它就会“漂浮”在其他所有方面。

position: absolute

DEMO

Answer 2

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

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

Answer 3

我的解决方案是使用不透明度进行选择：0并将其置于假按钮之上......

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

使用jquery按需显示选择选项

3 个答案: