चुनिंदा तत्व ड्रॉपडाउन पर क्रोम बग जब कई विकल्प छुपाए जाते हैं

Question

मैं क्रोम में एक प्रतिपादन बग के लिए एक कामकाज की तलाश में हूं। यह तब दिखाई देता है जब किसी चयनित तत्व में लगभग 9 0% + छुपा विकल्प तत्व होते हैं। क्रोम में, ड्रॉपडाउन ऊंचाई का उपयोग करने के लिए बहुत छोटा हो जाता है। यह अन्य ब्राउज़रों पर नहीं दिखता है। View example on jsFiddle.

HTML Example 
Note: Some options were removed to keep the code brief. 
The bug does not show up unless all options are present. 

100 Options, 90% Hidden:<br> 
<select> 
<option value="">Select an Option</option> 
<option value="0" style="display: none">Option 0</option> 
<option value="1" style="display: none">Option 1</option> 
<option value="2" style="display: none">Option 2</option> 
<option value="3" style="display: none">Option 3</option> 
<!-- Options removed for brevity. --> 
<option value="86" style="display: none">Option 86</option> 
<option value="87" style="display: none">Option 87</option> 
<option value="88" style="display: none">Option 88</option> 
<option value="89" style="display: none">Option 89</option> 
<option value="90">Option 90</option> 
<option value="91">Option 91</option> 
<option value="92">Option 92</option> 
<option value="93">Option 93</option> 
<option value="94">Option 94</option> 
<option value="95">Option 95</option> 
<option value="96">Option 96</option> 
<option value="97">Option 97</option> 
<option value="98">Option 98</option> 
<option value="99">Option 99</option> 
</select> 

ब्राउज़र परीक्षण किया गया:

• क्रोम 27 & 28 (असफल)
• फ़ायरफ़ॉक्स 21 (दर्रा)
• आईई 9 (दर्रा)
• ओपेरा 12 (पास)
• सफारी 5.1 (दर्रा)

View Example on jsFiddle
Alternate Example Link

अद्यतन: मैं इस विषय पर कुछ पढ़ने किया था, और जाहिरा तौर पर विकल्प का चयन के भीतर छिपा होना चाहिए नहीं कर रहे हैं। आप विकल्प अक्षम कर सकते हैं, लेकिन वे गायब नहीं होंगे। यदि आप चयन में कोई विकल्प नहीं चाहते हैं, तो आपको पूरी तरह से नोड को हटाना होगा। विकल्पों को छिपाने की क्षमता पूरी तरह से क्रॉस-ब्राउज़र काम करने के लिए प्रतीत नहीं होती है, और अधिकतर आप तीर कुंजियों का उपयोग करके "छिपा" विकल्प चुनना जारी रख सकते हैं। मुझे विकल्पों को चालू और बंद करने की आवश्यकता है, जो मेरी विशेष स्थिति के लिए यह असुविधाजनक बनाता है, लेकिन यह एकमात्र तरीका प्रतीत होता है जो अब तक काम करेगा।

Answer 1

जोड़ने से इस एक समाधान पर विचार किया जा सकता है:

$(document).ready(function() { 

    $('#ph2').mouseenter(function() { 

     var html = ''; 

     $(this).find('option').each(function() { 

      if ($(this).css('display') !== 'none') { 

       html = html + '<option>' + $(this).text() + '</option>'; 
      } 
     }); 

     $(this).html(html); 
    }) 
}); 

यहाँ jsFiddle है; मैं सिर्फ सादगी के लिए jquery का उपयोग कर रहा हूँ। इस मामले में, मैं सिर्फ माउसेंटर पर एचटीएमएल को फिर से शुरू कर रहा हूं। यह आदर्श नहीं है लेकिन यह आपको आगे जा सकता है। साथ ही, ध्यान दें कि आपके पास एचटीएमएल में एक div के रूप में ph2 सेट है; मुझे लगता है कि आपको इसे शुरुआत से चुनिंदा तत्व के रूप में सेट करना चाहिए और पहेली पर आप एचटीएमएल में किए गए परिवर्तन को देख सकते हैं। लेकिन समग्र रूप से, जब तक बग ठीक नहीं हो जाता है, मुझे लगता है कि ऐसा कुछ करीब होने वाला है क्योंकि आपको एक कार्य विकल्प मिल जाएगा।

Answer 2

सबसे अच्छा ठीक आपके चुनें तत्व में पिछले

<option></option> पर अंत में जोड़ना है। यह कोड जोड़ें:

<optgroup></optgroup>

यह अब के लिए एक खाली समूह तत्व जोड़ देगा, और यह दुर्लभ बग के सबसे अच्छा आराम से और तेजी से सुधार है।

धन्यवाद!

Answer 3

मुझे पता चला कि छुपे हुए/दृश्य विकल्पों का क्रम एक फर्क पड़ता है। यह क्रोम स्टॉप की तरह है जो पहले छिपे हुए विकल्प पर ड्रॉप डाउन के लिए ऊंचाई के लिए गिनती करता है। शो के शीर्ष पर दिखाए गए विकल्पों को स्थानांतरित करना एक तरीका है। यदि आप इस तरह jquery कुछ का उपयोग कर रहे हैं।

var select = "select#MySelect"; 
$(select).children("option").hide(); //hide all options 
$(select).children("Selector for items to show").each(function(idx, elm) { 
      $(elm).parent().prepend(elm); //move item to the top of parent 
}); 
$(select).children("Selector for items to show").show(); //show selected options 

Answer 4

इस बग मैं निम्नलिखित समाधान प्रस्तावित कर सकता के लिए एक समाधान के रूप में:

• एक विकल्प को छुपाने के लिए कुछ अन्य टैग करने के लिए 'कन्वर्ट' यह और .hide() साथ इसे छिपाने।
• विकल्प को 'कन्वर्ट' करने के लिए इसे option पर दिखाएं और इसे .show() के साथ दिखाएं।

'रूपांतरण' के लिए हमें इस तरह कुछ चाहिए: https://stackoverflow.com/a/9468280।

उदाहरण:

// some `replaceTagName` implementation here 

// hiding options 
$('.option-selector').replaceTagName('span').hide(); 

// showing options 
$('.option-selector').replaceTagName('option').show(); 

थोड़ा भारी है, लेकिन काम कर :)

Answer 5

मैं एक ही समस्या (Chrome 40) में पड़ गए और पाया गया कि निम्नलिखित तरीके को मेरे लिए अच्छी तरह से काम करता है।

var originalOptions = []; 

$(document).ready(function(){ 
    originalOptions = $("yourSelect").children("option"); 

    $("someElement").someEvent(function(){ 
     $("yourSelect").children("option").remove(); 
     $(originalOptions).each(function(){ 
      if(/*criteria here*/){$("yourSelect").append($(this));} 
     }); 
    }); 
}); 

Answer 6

मैं इस समस्या थी और यह मैं क्या किया है:

var originalSelect = $("#the_select").clone(); 

function hideSomeOptions(){ 
    $('#the_select .hide_me').remove(); 
} 

function restoreAllOptions(){ 
    $("#the_select").replaceWith(originalSelect[0]); 
} 

लक्ष्य का चयन इनपुट आईडी "the_select" है और विकल्प या optgroups टॉगल किया जा करने की जरूरत है कि "hide_me" है कक्षा।