Ответ 1
Вам не нужно беспокоиться о mobile-device
, select-menu
будет выглядеть примерно так:
а для debugging
вы можете использовать клавиши со стрелками down
и up
, чтобы выбрать опции меню, пока хром не устранит эту проблему.
Я столкнулся с этой проблемой, когда мне не удалось развернуть этот простой тег select на моем хроме.
<select id="filterCategory" class="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Вам не нужно беспокоиться о mobile-device
, select-menu
будет выглядеть примерно так:
а для debugging
вы можете использовать клавиши со стрелками down
и up
, чтобы выбрать опции меню, пока хром не устранит эту проблему.
грубая длинная намотка обходного пути, но вверху вы можете настроить индивидуальные меню:
$('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>
добавьте div для хромового и хромового браузера с атрибутом отключения данных:
<div data-tap-disabled="true">
<select>
</select>
</div>