8

選択内のオプションのオフセット位置を計算できません：

<select multiple="true">
    <option>asdf</option>
    <option id="bar">qwer</option>
</select>

$("#bar").offset()

Chromeが返す（1.7.2、1.9などのjQueryバージョンをテスト済み）：

{top: 0, left: 0}

FFは以下を返します：

{top: 26, left: 9}

FFリターンのようなポジションが必要です。Chromeの回避策はありますか？

http://jsfiddle.net/YrRLx/

4

2 に答える 2

2

ああ...私が考えることができる1つの解決策は、selectをulオブジェクトに置き換え、selectをulに同期するイベントハンドラーをアタッチすることです。li要素で.offset（）を呼び出すと、FFとChromeの両方で期待どおりに機能します。

したがって、li要素をクリックすると、背景色が更新され、非表示の選択の選択された値が更新されます。このように、フォームが送信されると、正しい値が送信されます。

http://jsfiddle.net/hqYqh/

HTML：

<select id="mySelect" multiple="true">
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
    <option>2019</option>
</select>

CSS：

ul.select {
    display: inline-block;
    border: 1px solid black;
    list-style: none;
    margin: 0;
    padding: 2px;
    height: 80px;
    overflow: auto;
    width: 50px;
}

ul.select li {
    background-color: none;
    cursor: pointer;
}

ul.select li.selected {
    background-color: skyblue;
}

JS：

var $select = $('#mySelect');
var $ul = $('<ul class="select">').on('click', 'li', function() {
    $(this).parent().find('li').removeClass('selected');
    $(this).addClass('selected');
    $select.val($(this).text()).change();
});

$select.find('option').each(function() {
    var $li = $('<li>').text($(this).text());
    $ul.append($li);
});

$select.hide().after($ul);

$select.change(function() {
    alert('Offset of ' + $(this).val() + ' is ' + JSON.stringify($('li.selected').offset()));
});

編集済み

そこで、select要素のoffset（）とscrollTop（）を使用して、Huangismの提案に従って別のメソッドを試しました。

利用できないのは、オプション要素の高さだけです。そこで、フォントサイズを使用して見積もりを試みましたが、完全ではなく、正確なオフセットを取得するためにChromeにマジックナンバー3を追加する必要がありました。オプション要素の高さを把握できれば、上記のすべてのul/liビジネスに対処する必要はありません。

ここにあります：

http://jsfiddle.net/hqYqh/2/

optionOffset = function($option) {
    var i = $option.index();
    var h = Number($option.css('font-size').replace(/px/, '')) + 3; // Cannot get the height of the option element :(
    var $select = $option.parent();
    var offset = $select.offset();
    offset.top += i*h - $select.scrollTop();
    return offset;
}
于 2013-03-15T12:42:32.787 に答える
0

オプションが表示されていないため、chromeは0を返し、topを計算できません。これは、すべてWebkitブラウザーであるため、Safariでも発生する可能性があります。私が考えることができる唯一のことは、選択のオフセットトップを取得してから、オプションのおおよそのトップを取得するためにいくつかの計算を実行することです。たとえば、オプションの高さが約10ピクセルの場合、必要なオプションの前にあるオプションの数を把握し、選択した上部に追加する必要のあるピクセル数を計算する必要があります。

于 2013-03-12T21:24:20.980 に答える