javascript – 这可以添加计数到选择框吗？

我有一个像这样的选择框

<select name="select1" onm ousedown="if(this.options.length>5){this.size=5;}"
        onchange="this.size=0;" onblur="this.size=0;" style="width:200px">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
</select>

单击箭头以删除列表时,它仅显示前五个选项.现在我想实现这一点 – 当我向下滚动时,滚动条附近会出现一个数字,与当前所选选项相同(当我滚动到第6个选项时,当我滚动到第10个选项时,该数字将显示为“6”)它会显示“10”等等.关于如何做到这一点的任何想法？

演示的图像如下所示

解决方法:

那里有一点小故障..稍后会工作……现在赶时间……但是你得到了基本的想法..

UPDATE

完全有效的例子.

所以逻辑是这样的,当前底部元素的位置编号是通过在视口portsize中添加元素的数量和从底部添加滚动元素的数量来计算的.
因此,从当前进入视图端口的最后一个向上滚动元素的高度是通过将当前scrollTop除以option元素的高度得出的.

$(function(){

  var $select = $('#customSelect')
  var $counter = $('#counter')
  var displaySize = 5
  var optionEleHeight
  
  $counter.text(displaySize)
  
  $select.scroll(function(e){
 
    optionEleHeight = optionEleHeight || this[0].offsetHeight
    currentBottomEleNo = this.size +
                               Math.round(e.currentTarget.scrollTop/optionEleHeight)
  
    $counter.text(currentBottomEleNo)

  })
  .on('change blur', function(){
    this.size=0
    $counter.hide()
  })
  .on('mousedown', function(){
    if(this.options.length>displaySize){
       this.size=displaySize
       $counter.fadeIn()
    }
  })


})

.selectContainer{
  position: relative;
  width:200px;
}
#customSelect{
  width:200px;
}
#counter {
  position: relative;
  right: 20px;
  top: -40px;
  float: right;
  color: #1CD1D8;
  background-color: #444;
  border-radius: 20px;
  padding: 8px;
  width: 20px;
  text-align: center;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=selectContainer>
  <select id="customSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
</select>
<div id=counter></div>
</div>

标签：javascript,css,custom-controls,html,custom-component
来源： https://codeday.me/bug/20190628/1316083.html