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

これが最善の解決策かどうかはわかりませんが、同様の問題が発生したとき、常に開いているように見える属性を与えselect、何よりも「浮く」ように属性を与えました。sizeposition: absolute

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

デモ

于 2013-07-01T11:16:24.857 に答える
0

もう少し複雑ですが、オプションを (select ではなく) 表示される 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 に答える
0

私の解決策は、 opacity:0 で選択を行い、それを偽のボタンの上に置くことでした...

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