下拉框中选项的快速定位

对于选项很多的下拉框 <select>，人工定位到想要的项目是很费劲的。浏览器其实原生支持下拉选择框根据键盘输入自动定位到相应条目的。

通过输入条目字母定位到下拉框中条目的位置

方便是方便，有个问题是连续输入不能间隔太久，这个间隔实测中感受是非常短的，如果想找的条目比较难输入，就无法在短时间内完成这个操作。

那有没有相应 API 修改这个间隔时间呢？不能，至少我还没找到。

`<datalist>`

其实 HTML5 中提供了另外一个元素，<datalist>。用它结合一个文本输入框可实现 Combo box 的效果，即根据输入自动筛选列表中的元素。

<input type="text" id="names" list="nameList" />
<datalist id="nameList">
  <option value="Larhonda Trentham">Larhonda Trentham</option>
  <option value="Nicola Madigan">Nicola Madigan</option>
  ...
</datalist>

创建 <datalist> 元素并指定 id 值，同时将候选项放入 <option> 作为其子元素。然后为输入框指定 list 属性，值便是 <datalist> 的 id。

通过输入条目字母定位到下拉框中条目的位置

浏览器兼容性

IE10+ 可安心食用，详情参见 MDN 的数据。

让下拉框中同时显示Key与Value

声明:原创作品,转载时请注明文章来自SAP师太技术博客:www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将追究法律责任!原文链接:http://www.cnblogs.com/jiangzhengjun/p/4296020.html 作为开发人员,希望看到下拉框中选项的Key,一般GUI安装后,下拉框是不显示Key的,只有Value: 通过下面设置后,就可以显示Key了: 这样就知道了后台真实值了

快速解决js开发下拉框中blur与click冲突

在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以.click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 1 2 3 4 5 6 7 8 9 10 11 12 13 <input type="te

crm2013 查看下拉框的选项

在CRM2011中,我们很容易查看下拉框的选择,打开页面,按F12,把光标对准目标,就会显示出具体的选项,如图:' 但是在crm2013里面,却不能这样做: 那么该怎么做? 先把下面的那句代码放到控制台里面执行,就会出现上面的情况点击添加以监视: 这样就可以看到具体的每一个选项了.如果你先了解更多,请查看crm的SDK. crm2013 查看下拉框的选项,布布扣,bubuko.com

封装下拉框控件！将查询到信息塞到下拉框中，将所选的内容截取并显示到静态框（联动显示）

1 int CSetOrgan::GetAllArea(CString& operArea) 2 { 3 CString strTemp; 4 for(int i=0; i<m_cmbDept.GetCount(); i++) 5 { 6 m_cmbDept.DeleteString(i); 7 } 8 this->PrepareReqPack(TX_QUERYORGAN); 9 AddField((getUIData().getUserId()), sorder0, F_SORDER

JavaScript获取select下拉框中的第一个值

JavaScript获取select下拉框中的第一个值 1.说明获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

利用js取到下拉框中选择的值

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JavaScript向select下拉框中添加和删除元素

JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm

jquery选中将select下拉框中一项后赋值给text文本框

jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件.所以无法进行赋值给文本框解决方法. select下拉框设置第一项做一个无用的占位option <script type="text/javascript"> function changeSelect(obj) { var _this = obj;

下拉框中选项的快速定位

`<datalist>`

浏览器兼容性

相关资源