Geek Answers Handbook

Can I add a quantity to the selection box?

I have a selection box like this

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

When you click on an arrow to delete a list, only the first five parameters are displayed in it. Now I want to achieve this - when I scroll down, a number similar to the currently selected option will appear next to the scroll bar (for example, when I scroll to the 6th parameter, this number will show “6” when I scroll to the 10th option it will show "10", etc.). Any ideas on how to do this?

Image for demonstration as below

enter image description here

+4
source share
2 answers

There is a little glitch .. will work on it later .. in a hurry now .. but you get the main idea ..

UPDATE

A fully working example.

, : no 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>
Hide result
+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);
});

?

+1

More articles:


All Articles