создать выпадающий список с полосой прокрутки

У меня есть выпадающий список HTML со списком опций. Когда пользователь нажимает на раскрывающийся список, следует увидеть первые пять параметров с полосой прокрутки. Я хочу достичь этого с помощью JavaScript и CSS. Поскольку я новичок в них, пожалуйста, предложите, как я могу показать раскрывающийся список с полосой прокрутки, чтобы можно было прокручивать и выбирать параметр из выпадающего списка. Ниже мой HTML код:создать выпадающий список с полосой прокрутки

<html> 
<body> 
<select> 
     <option value="one">Option1</option> 
     <option value="two">Option2</option> 
     <option value="three">Option3</option> 
     <option value="four">Option4</option> 
     <option value="five">Option5</option> 
     <option value="siz">Option6</option> 
     <option value="seven">Option7</option> 
     <option value="eight">Option8</option> 
    </select> 
</body> 
</html>

С выше HTML код, когда пользователь нажимает на раскрывающемся списке, все опции можно увидеть без scrollbar.I хочу показать первые пять вариантов с скроллинга.

источник

2016-09-13 Rij

http://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dropdown –

Я пробовал эти трюки из вышеупомянутого URL-адреса, но он сбой в IE11. В нем говорится, что «Internet Explorer перестала работать» закрыть программу. @jeffcarey – Rij

Вы можете сделать это, используя только html и css. Вам нужно создать div, который будет содержать вашу кнопку, а также div выпадающего списка со связанным списком внутри. В фактическом css для раскрывающегося div вы должны указать максимальную высоту, чтобы настроить количество ссылок, которые вы хотите показать, а также переполнение: auto, чтобы сделать его доступным для прокрутки. В том числе скриншот того, как он должен выглядеть, и вот пример только с помощью HTML и встроенный CSS: enter image description here

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    .dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    max-height: 200px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 
</style> 
</head> 
<body> 

<div class="dropdown"> 
    <button class="dropbtn">Dropdown</button> 
    <div class="dropdown-content"> 
    <a href="#">Option 1</a> 
    <a href="#">Option 2</a> 
    <a href="#">Option 3</a> 
    <a href="#">Option 4</a> 
    <a href="#">Option 5</a> 
    <a href="#">Option 6</a> 
    <a href="#">Option 7</a> 
    <a href="#">Option 8</a> 
    </div> 
</div> 

</body> 
</html>

* Кроме того, я просто понял, что я создал пример со ссылками и ваш использует параметр элемента, но такая же концепция должна применяться. Просто отредактируйте CSS класса выпадающий-контента, чтобы включить вариант:

.dropdown-content a, option {//same css here}

источник

2016-09-13 01:23:14

Ответ от Lasith - это, пожалуй, самый простой способ с возможностью щелчка с помощью javascript. Но я могу переформатировать свой путь с включенными вашими опционными элементами. –

Решение от Lasith не работает в IE11. Я хочу, чтобы код работал во всех браузерах. В IE11 отображается диалоговое окно с сообщением «Internet Explorer перестает работать», когда мы выбираем опцию из списка. – Rij

Решение Lasith является хорошим https://jsfiddle.net/Ltkpshm9/, но когда я попробовал тот же код в своем локальном каталоге, поместив код в текстовый файл с кодом javascipt в

попробовать этот https://jsfiddle.net/Ltkpshm9/ пример я добавил к jsfiddel или просто использовать,

<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"> 
    <option value="one">Option1</option> 
    <option value="two">Option2</option> 
    <option value="three">Option3</option> 
    <option value="four">Option4</option> 
    <option value="five">Option5</option> 
    <option value="siz">Option6</option> 
    <option value="seven">Option7</option> 
    <option value="eight">Option8</option> 
</select>

источник

2016-09-13 01:30:51 Lasith

Я сохранил код в отдельном текстовом файле и сохранил расширение .html. Когда я открываю в браузере, он показывает пустую страницу. Мне нужно добавить любую функцию onload. Пожалуйста, предложите. Я сохранил javascript-код в теге

создать выпадающий список с полосой прокрутки

ответ

Смежные вопросы