select标签中怎样控制option的显示数量

  最近做项目,需要动态加载数据显示到下拉列表中。

  刚开始用select标签,由于数据较多,一次性全部加载,下拉列表会拖得很长,不忍直视(默认会显示20个)。

  我想控制select中的option显示的个数,例如:只显示5个,其余的通过滚动条来控制显示。

  经过反复折腾,发现直接操作select标签无法达到目的,于是改换策略,用input标签和ul标签来模拟select标签。

  效果:

 

  Demo下载

select标签中怎样控制option的显示数量,布布扣,bubuko.com

时间: 2024-07-29 11:52:24

select标签中怎样控制option的显示数量的相关文章

获取select标签中option的value值

<select id="teacher" name="tea-list" form=""> <option value="none">请选择老师</option> <option value="1">老师1</option> </select> //获取select标签中option的value值 var $teacher=$('#te

清空select标签中option选项的3种不同方式

本文为大家详细介绍下使用3种不同方式来清空select标签中option选项,具体语法格式如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 方法一 复制代码 代码如下: document.getElementById("selectid").options.length = 0; 方法二 复制代码 代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码 代码如下: document.getElementById(

each函数遍历select标签下的所有option选项

如下: <select id="asd" name="sweet1"> <option value=1>--四川--</option> <option value=2>--广东--</option> </select> <script>function eachoption(){ $("#asd option").each( function(){ alert($

vue里面select标签 添加默认选项&lt;option v-for=&quot;item in email&quot; :value=&quot;&#39;@&#39;+item&quot;&gt; chooseEmail: &#39;@163&#39;,

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 [v-cloak] { 8 display: none; 9 } 10 </style> 11 </head>

关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"type"> <option value="" selected="selected">请选择</option> <c:forEach items="${typeList}" var="typeLis

清空select标签中的内容

<select id="search"><option>baidu</option><option>sogou</option></select> 清空:$("#search").find("option").remove();或者$("#search").empty();

清空select标签中option选项的4种不同方式

转自:https://blog.csdn.net/pt_sm/article/details/53521560 方法一 document.getElementById("selectid").options.length = 0; 方法二 document.formName.selectName.options.length = 0; 方法三 document.getElementById("selectid").innerHTML = ""; 

解决asp.net中repeater控件的显示数量控制

在使用oracle时,没有top这个属性,如果想限制查询数量,必须使用伪字段ROWNUM 可以看到这里第一列没有title的字段就是rownum字段,在oracle插入数据的时候自带的,无需人为添加. 我们如果想要实现控制查询数量,可以利用这个字段. 方案一: 我们可以写成 SELECT * FROM TA_新闻 WHERE ROWNUM <= 3 ORDER BY 发布时间 DESC 来控制显示三条记录. 但是,我们注意到这个ROWNUM是在插入数据时产生的,也就是说如果我们新插入一条发布时间

angularjs select标签中参数的传递

今天做的一个demo中需要一个下拉选择框,并根据所选择的内容向服务器发送请求. 首先百度了一下angularjs关于select的使用,一种采用ng-repeat的方式. <select ng-model="stuTerm"> <option ng-repeat="term in terms" value="{{term.val}}">{{term.text}}</option> </select>