<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<script>
function generateScrolldown() {
var html = "";
html = html + ('<option>'
+ 'dddddd'
+ "</option>");
$("#dynamicDLmultiAvailableList").append(html);
}
</script>
<h1>The template Tag</h1>
<div>
<select class="form-control"
id="dynamicDLmultiAvailableList" multiple size="12" onscroll="generateScrolldown()">
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
<option>sdsdsdsdsd</option>
</select>
</div>
</body>
</html>
В Firefox этот небольшой фрагмент кода не имеет правильной компоновки, которую я пытался прокрутить вниз, и метод append () добавит новый элемент, но кнопка прокрутки не опускается и всегда отображается вверху.
Также пробовал на IE и Chrome нет этой проблемы
Кто-нибудь знает, как добавить новый элемент, и хорошо работает в Firefox.