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个选项时，该数字将显示＆＃34; 6＆＃34;，当我滚动到第10个选项，它将显示＆＃34; 10＆＃34;依此类推）。关于如何做到这一点的任何想法？

演示图片如下所示

enter image description here

Answer 1

有一点小故障..稍后会对它起作用...现在赶时间......但是你得到了基本的想法..

<强>更新

完全成功的例子。

所以逻辑是这样的，当前底部元素的位置编号是通过在视口displaySize中添加元素的数量和从底部添加滚动元素的数量来计算的。因此，从底部向上滚动元素的高度（现在已进入视图端口）是通过将当前scrollTop除以option元素的高度得出的。

＆＃13;

$(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()
    }
  })


})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

试试这个。

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);
});

你需要吗？

是否可以在选择框中添加计数？

2 个答案: