javascript - 在 HTML 选择列表中选择选项时的 HTML 垂直居中选择

标签 javascript html

我有以下 HTML 代码:

<select name="" id="listF" size="10">
        <option value="01">001</option>
        <option value="02">002</option>
        <option value="03">003</option>
        <option value="04">004</option>
        <option value="05">005</option>
        <option value="06">006</option>
        <option value="07">007</option>
        <option value="08">008</option>
        <option value="09">009</option>
        <option value="10">010</option>
        <option value="11">011</option>
        <option value="12">012</option>
        <option value="13">013</option>
        <option value="14">014</option>
        <option value="15">015</option>
        <option value="16">016</option>
        <option value="17">017</option>
        <option value="18">018</option>
        <option value="19">019</option>
        <option value="20">020</option>
        <option value="21">021</option>
        <option value="22">022</option>
        <option value="23">023</option>
        <option value="24">024</option>
    </select>

我有以下 JavaScript

$('#listF').click(function(){
    var n = 10;
    if(this.selectedIndex < ($(this).find('option').length-n)) {
    this.selectedIndex+=n;
    this.selectedIndex-=n;
    }
});

选择的 HTML 长度是 10 - 我希望每当我选择一个选项时它垂直居中(而不是水平)说它将显示在第 5 个例如

Option 1 
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10

如果我选择选项 12 - 选项 12 将居中

Option 8
Option 9
Option 10
Option 11
Option 12 <<<<<Centered
Option 13
Option 14
Option 15
Option 16
Option 17

假设我选择选项 7 - 选项 7 将居中

Option 3
Option 4
Option 5
Option 6
Option 7 <<<<<Centered
Option 8
Option 9
Option 10
Option 11
Option 12

我如何修改我的 javascript 以实现此目的?

我想将 <option> 垂直居中相对于 <select>

最佳答案

Demo

$('#listF').on('change', function(){
    var n = this.getAttribute('size'),
        i = this.selectedIndex,
        l = this.options.length;
    this.selectedIndex = Math.min(l-1, i+n/2|0);
    this.selectedIndex = Math.max(0, i+1-n/2|0);
    this.selectedIndex = i;
});

测试了奇数和偶数尺寸。

关于javascript - 在 HTML 选择列表中选择选项时的 HTML 垂直居中选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22130926/

相关文章:

javascript - 无法访问异步函数外部的变量

javascript - socket.io:如何放弃 url:port 方案?

html - 如何使背景图像缓慢放大和缩小

javascript - 为什么在 angularjs 中与 ng-model 一起使用时,html 中的值属性不起作用?

javascript - Sencha 触摸 : How to change the default image of Select dropdown field?

javascript - 对数字数组进行排序

javascript - 如何在页面滚动到固定级别后向上滚动特定的div?

javascript - 从数组中删除重复元素(利用对象) - Javascript

java - 如何进行流体盒过渡

java - 如何获得小型 Java 程序的 Web 界面?