如何让Select下拉框具有输入功能

转载 2015年07月06日 17:19:07
一般情况下,Select下拉框是只能选择,不能用来输入内容的。当select下拉框中没有要选择的信息项时,可以直接在select中输入自己想要得信息项,在输入信息项时,不改变select下拉框中原有的信息项,这种功能该如何实现呢?下面介绍如何让Select下拉框具有输入功能
			
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>js实现可输入的下拉框</TITLE>
</HEAD>
<BODY>
<div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="德国">德国</option>
<option value="挪威">挪威</option>
<option value="瑞士"> 瑞士</option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</BODY>
</HTML>

注:this.parentNode.nextSibling.value 当前对象父节点的下一个节点的值

实现方式二

			
<select id="select" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">
<option value=""></option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<input type="button" value="获取选择值" id="test" onclick="test();"/>
<script>
var Select = {
del : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8){
var opt = obj.options[0];
opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);
}
},
write : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8)return ;
var opt = obj.options[0];
opt.selected = "selected";
opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);
}
}
function test(){
alert(document.getElementById("select").value);
}
</script><br />
			
				 
		



相关文章推荐

设置select 的手动输入功能

html>head> title>Untitledtitle>head>script language="javascript">function   combox(obj,select){  ...
  • fhm727
  • fhm727
  • 2009年09月16日 12:23
  • 3791

js即可手动输入又可下拉选择

下拉表

html中的select下拉框具有输入功能

转载:https://www.douban.com/note/395390036/ 一般情况下,select下拉框是只能选择,不能用来输入内容的。当select下拉框中没有要选择的信息项时,...

怎么实现select可以下拉也可以输入的功能

今天项目中有要求用到这个功能,所以在网上搜了老半天,找到一个比较好的插件jquery-editable-select,就是用我们知道,一般select下拉框是只能选择的,不能用来输入内容的。而有时我们...

简单实用js——可输入可选择可模糊查询的select下拉

在网上有很多可输入及模糊查询的select下拉插件,功能也很强大,比如select、chosen等,做这个的方法也是有很多的,适用自己就好,下面是我自己的一个方法,希望适合大家 CSS代码 ...

可以输入的下拉框实现方法

可以输入的下拉框其实就是select和input的组合使用 * { margin: 0px auto; padding: 0px auto; ...

bootstrap的select2既可以查询又可以输入

首先关键一句话: $(".js-example-tags").select2({ tags: true }) 别小看此代码功能可谓强大,在需要的地方直接加进去class如下代...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery实现下拉框可自定义输入文本的功能

一般来说,Select下拉框只能选择,不能用来输入内容。当下拉框没有要选择的信息项时,则需要手动输入。实现思路:通过select与text文本框的结合,具体则是通过将text文本框覆盖到select下...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让Select下拉框具有输入功能
举报原因:
原因补充:

(最多只允许输入30个字)