क्रोम

Question

पर काम नहीं कर रहे विकल्पों के साथ सरल चयन टैग मैं इस समस्या से भाग गया जहां मैं अपने क्रोम पर इस सरल चयन टैग का विस्तार करने में असमर्थ हूं।

<select id="filterCategory" class=""> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select>

कदम पुन: पेश करने:

1. (क्रोम पर) के ऊपर भागो कोड स्निपेट,
डेवलपर्स मोड (F12) के लिए
2. जाओ,
3. टॉगल मोबाइल डिवाइस मोड (डिफ़ॉल्ट रूप से Ctrl + Shift + M)

मैं वर्तमान में उबंटू

पर क्रोम संस्करण 53.0.2785.116 (64-बिट) का उपयोग कर रहा यह किसी अन्य ब्राउज़र या मोबाइल देशी ब्राउज़रों में ठीक काम करता है, यह सिर्फ क्रोम के लिए है।

प्रश्न: इसके लिए कोई अस्थायी समाधान?

संपादित करें: यदि मैं बूटरस्ट्रैप से अपने कंटेनर और form-control कक्षा के रूप में तय की गई स्थिति का उपयोग करता हूं तो यह व्यवहार खराब हो जाता है। विकल्प अदृश्य विकल्पों के साथ क्रोम विंडो से बाहर है।

Answer 1

आप चिंता करने की mobile-device के बारे में, select-menu कुछ इस तरह दिखेगा,

और debugging के लिए आप क्रोम ठीक जब तक मेनू विकल्पों का चयन करने के down और up तीर कुंजी का उपयोग कर सकते हैं की जरूरत नहीं है इस मुद्दे।

Answer 2

• क्रोमोर क्रोमियम संस्करण के साथ समस्या मौजूद है।
• यहां तक ​​कि अगर इस मुद्दे को डेवलपर मोड में मौजूद हैं, यह विकल्प का चयन @mobileDevice
• में ठीक होगा कुछ भी है कि एक लटकती, डेटा पिकर renders को प्रभावित करता है, चयन विकल्प
• क्रोम संस्करण पुनर्स्थापित करने का प्रयास।
• डेवलपर मोड के साथ समस्या हल हो जाएगी।

Answer 3

कच्चे घना वैकल्पिक हल है, लेकिन उल्टा पर आप शैली अनुकूलित मेनू के लिए अनुमति देता है:

$('select').each(function() { 
 
    // set up the list 
 
    var $this = $(this), 
 
    $class = $this.attr('class') + ' sel', 
 
    $id = $this.attr('id'), 
 
    list = '', 
 
    opts = '', 
 
    start = ''; 
 
    $this.hide(); 
 
    $('option', this).each(function(i) { 
 
    var content = $(this).text(); 
 
    if (i === 0) { 
 
     start = '<div >' + content + '</div>'; 
 
    } 
 
    opts += '<li data-id="' + $id + '">' + content + '</li>'; 
 
    }); 
 
    list = '<ul >' + opts + '</ul>'; 
 
    $this.after('<div class="' + $class + '" >' + start + list + '</div>'); 
 
}); 
 

 
// adds the clicks 
 
$('.sel').on('click', function(e) { 
 
    $('ul', this).fadeIn('fast'); 
 
    $('ul', this).on('mouseleave', function() { 
 
    $(this).fadeOut('slow'); 
 
    }); 
 
}); 
 

 
// registers the input to the original selector 
 
$('.sel ul li').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $('.sel ul').fadeOut('fast'); 
 
    var $this = $(this), 
 
    target = $this.data('id'), 
 
    num = $this.text(); 
 
    $('select#' + target).val(num).change(); // triggers the hidden selector 
 
    $this.parent().siblings().text($this.text()); 
 
    return false; 
 
}); 
 

 

 

 
// test only 
 
$('select').on('change', function() { 
 
    $("#monitor").text(this.value); // or $(this).val() 
 
});

.sel { 
 
    width: 3em; 
 
    background: #fff; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    border: 1px solid #09f; 
 
} 
 

 
.sel ul { 
 
    display: none; 
 
    position: relative; 
 
    left: 0em; 
 
    top: -1em; 
 
    width: 3em; 
 
    margin: 0em; 
 
    padding: 0em; 
 
    cursor: pointer; 
 
    background: #fff; 
 
    text-align: center; 
 
    list-style-type: none; 
 
} 
 

 
.sel ul li:hover { 
 
    background: #bbb; 
 
} 
 

 
#monitor { 
 
    position: fixed; 
 
    left: 3em; 
 
    width: 3em; 
 
    height: 1em; 
 
    bottom: 4em; 
 
    background: #09f; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<select id="filterCategory" class=""> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select> 
 

 

 
<div id='monitor'>test</div>

Answer 4

डेटा-टैप-विकलांग विशेषता के साथ क्रोम और क्रोमियम ब्राउज़र के लिए एक div जोड़ने इस तरह:

<div data-tap-disabled="true"> 
 
    <select> 
 
    </select> 
 
</div>