Bellow my simple html code for dropdown option
<select class="form-control" id="myList">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="load">
<div id="loadMore">Load more</div>
</option>
</select>What i want to achive. I will show the option 1-5 after when click loadmore then will show more 5. I have researched few resource those are too poor and not so clear instruction. If you guys help me about it i will be glad for that. Thanks to all seniours developers.
Use this function on onClick on loadMore id
function addMore() {
var optionsArr = ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']
for (let i = 0; i < optionsArr.length; i++) {
var options = `<option value="${optionsArr[i]}">${optionsArr[i]}</option>`
$("#myList").append(options)
}
}
Hope this will help you