Chrome की ऑफसेट() विकल्प

Question

के लिए शून्य मान लौटाता है मैं भीतर एक विकल्प की भरपाई स्थिति की गणना नहीं कर सकते हैं एक का चयन करें:

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

$("#bar").offset() 

क्रोम रिटर्न (किसी भी jQuery संस्करणों 1.7.2 की तरह, 1.9 का परीक्षण):

{top: 0, left: 0} 

एफएफ रिटर्न:

{top: 26, left: 9} 

मैं एफएफ रिटर्न की तरह पदों की जरूरत है। क्या क्रोम के लिए कोई कामकाज है?

http://jsfiddle.net/YrRLx/

Answer 1

आह ... एक समाधान जिसे मैं सोच सकता हूं, उल ऑब्जेक्ट के साथ चयन को प्रतिस्थापित कर रहा है, और ईवेंट हैंडलर को उल को चुनने के लिए संलग्न करता है। ली तत्वों पर कॉलिंग। ऑफसेट() एफएफ और क्रोम दोनों पर अपेक्षित काम करता है।

तो यदि आप ली तत्वों पर क्लिक करते हैं, तो यह इसके पृष्ठभूमि रंग को अपडेट करेगा और छिपे हुए चयन के चयनित मूल्य को अपडेट करेगा। इस तरह, जब फॉर्म जमा किया जाता है, तो सही मान भेजा जाता है।

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> 

सीएसएस:

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; 
} 

जे एस:

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

संपादित

तो, मैंने चयनित तत्व के ऑफसेट() और scrollTop() का उपयोग करके हुआंगवाद के सुझाव के बाद एक और विधि की कोशिश की।

केवल एक चीज जो उपलब्ध नहीं है विकल्प तत्व की ऊंचाई है। तो मैंने फ़ॉन्ट आकार का उपयोग करने का अनुमान लगाने की कोशिश की, लेकिन यह सही नहीं था, और मुझे सटीक ऑफसेट प्राप्त करने के लिए क्रोम पर जादू संख्या 3 जोड़ना पड़ा। यदि आप विकल्प तत्व की ऊंचाई को समझ सकते हैं, तो आपको उपरोक्त सभी उल/ली व्यवसाय से निपटने की ज़रूरत नहीं है।

संदेश यह है:

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; 
} 

Answer 2

मैं कहूँगा कि क्रोम रिटर्न 0 विकल्प की वजह से दिखाई दे रहा है, तो यह शीर्ष गणना नहीं कर सकते नहीं है। यह सफारी में भी हो सकता है क्योंकि यह सभी वेबकिट ब्राउज़र है। केवल एक चीज जिसे मैं सोच सकता हूं वह है कि आप चयन के ऑफसेट टॉप प्राप्त करें और फिर विकल्प के अनुमानित शीर्ष प्राप्त करने के लिए कुछ गणना करें। उदाहरण के लिए, यदि कोई विकल्प ऊंचाई में लगभग 10px है, तो आपको यह जानना होगा कि आप जिस व्यक्ति को चाहते हैं उससे पहले कितने विकल्प हैं और यह चुनें कि चयन शीर्ष पर जोड़ने के लिए आपको कितने पिक्सेल की आवश्यकता है।