如何让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 />
			
				 
		



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

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

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

可以输入的下拉框其实就是select和input的组合使用 * { margin: 0px auto; padding: 0px auto; ...
  • qq_31083947
  • qq_31083947
  • 2016年12月11日 20:35
  • 5022

HTML 实现可输入select标签

一般情况下,Select下拉框是只能选择,不能用来输入内容的。当select下拉框中没有要选择的信息项时,可以直接在select中输入自己想要得信息项,在输入信息项时,不改变select下拉框中原有的...
  • zhenxino8
  • zhenxino8
  • 2015年06月25日 15:56
  • 6113

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

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

SELECT input 下拉框可输入

SELECT input 下拉框可输入
  • Alex81320
  • Alex81320
  • 2017年03月02日 15:50
  • 213

可输入可选择下拉框

可输入可选择的下拉框,将input定位在select上......
  • IT429
  • IT429
  • 2016年09月08日 09:25
  • 1942

select框既可以手输入也可以选择

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta charset="UTF-8"&gt; &a...
  • zhangjing1019
  • zhangjing1019
  • 2018年01月04日 15:08
  • 98

html select 可输入 可编辑

1 HTML> 2 HEAD> 3 META http-equiv='Content-Type' content='text/html; charset=gb2312'> 4 TITLE>js实...
  • linshichen
  • linshichen
  • 2017年06月07日 15:51
  • 686

可输入文本的SELECT

插件名称:jquery-editable-select 下载地址:http://plugins.jquery.com/node/9250 这个插件有个小问题: 1、显示的是option的text...
  • xinqingch
  • xinqingch
  • 2012年12月12日 16:19
  • 4408

【web前端】可筛选[输入搜索]的select

基于jquery, 带筛选,可搜索的 select 插件。与 select 元素无缝结合,最大程度上,保证 select 的原生性。兼容 ie7 及 以上浏览器...
  • linfenpan
  • linfenpan
  • 2015年09月26日 12:43
  • 5429
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让Select下拉框具有输入功能
举报原因:
原因补充:

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