0

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/

4

3 回答 3

1

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

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

演示

于 2013-07-01T11:16:24.857 回答
0

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

select{ position:absolute; top:0; left:0; height;100%; width:100%;opacity:0; }
于 2013-07-05T14:34:17.833 回答
0

虽然涉及更多一些，但您可以将选项转换为显示的 div（而不是选择），然后处理显示的 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/

于 2013-07-01T12:25:35.720 回答