javascript - 是否可以将计数添加到选择框？

Question

我有一个这样的选择框

<select name="select1" onmousedown="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 个选项时，该数字将显示“6”，当我滚动到第 10 个选项时它将显示“10”等等)。关于如何执行此操作的任何想法？

演示图片如下所示

Answer 1

有点小问题..稍后会解决..现在赶时间..但你明白了基本的想法..

更新

完整的示例。

所以逻辑是这样的，当前底部元素的位置数是视口(viewport)displaySize中的元素个数加上从底部向上滚动的元素个数。因此，现在进入视口(viewport)的最后一个从底部向上滚动的元素的高度是通过将当前 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>