Вы можете комбинировать forEach
и setTimeout
, чтобы зациклить массив с интервалом.
let modes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let interval = 1000; //one second
modes.forEach((mode, index) => {
setTimeout(() => {
console.log(mode)
}, index * interval)
})
Один из вариантов - показать выбранный вариант над (или под) списком выбора, как показано ниже:
HTML
<div id="selText"><span> </span></div><br/>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#mySelect").change(function(){
//$("#selText").html($($(this).children("option:selected")[0]).text());
var txt = $($(this).children("option:selected")[0]).text();
$("<span>" + txt + "<br/></span>").appendTo($("#selText span:last"));
});
});
</script>
PS: - Установить высоту div # selText в противном случае он будет продолжать перемещать список выбора вниз.
Горизонтальные полосы прокрутки в HTML Select изначально не поддерживаются. Однако вот способ создать вид горизонтальной полосы прокрутки:
1. Сначала создайте класс css
<style type="text/css">
.scrollable{
overflow: auto;
width: 70px; /* adjust this width depending to amount of text to display */
height: 80px; /* adjust height depending on number of options to display */
border: 1px silver solid;
}
.scrollable select{
border: none;
}
</style>
2. Оберните SELECT в DIV - также, явно установите размер в соответствии с количеством параметров.
<div class="scrollable">
<select size="6" multiple="multiple">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</div>