是否可以将计数添加到 select 框？

Question

我有一个这样的select盒子

<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>

当点击箭头下拉列表时，它只显示前五个选项。现在我想实现这个——当我向下滚动时，滚动条附近会出现一个数字，它与当前的 selected 选项相同（比如当我滚动到第 6 个选项时，该数字将显示“6”，当我滚动到第 10 个选项，它会显示“10”等等）。关于如何做到这一点有什么想法吗？

演示图片如下

Answer 1

试试这个。

FIDDLE DEMO

我把HTML改成了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>        
<select id="input1" name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.size=0;" onblur="this.size=0;" style="width:200px">
        <option>Select</option>
        <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="total_count_preview"></div>
    <div id="selected_count_preview"></div>

和jquery

$('#input1').on("change",function() {

    $("#total_count_preview").text('Total '+$("#input1 option").length + " items");
    $("#selected_count_preview").text('Selected Item  '+this.selectedIndex);
});

你需要吗？

Answer 2

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

更新

完整的示例。

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

是否可以将计数添加到 select 框？

Is this possible to add count number to select box?

html

javascript

css

custom-controls

custom-component