<body>
<p align="center">
<select id='sel2' style='width:200px'>
<option value=''></option>
<option value='选项一'>选项一</option>
<option value='选项二'>选项二</option>
</select>
</p>
<button onclick="getSelectedValue()"> test</button>
<select id="input_select1" style="width:100px">
<option value=""></option>
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
</select>
<select id="input_select2"" style="width:100px">
<option value=""></option>
<option value="CCC">CCC</option>
<option value="DDD">DDD</option>
</select>
<script language="JavaScript">
/*****
**@param id SLEECT标签的唯一编号
**@param maxLength 下拉框能输入的最多字符数，该参数可以不传入
*/
function regInputSelect(id, maxLength){
var obj = document.getElementById(id);
var input = document.createElement("input");
input.type = "text";
if(typeof(maxLength) != "undefined"){
input.maxLength = maxLength;
}
//设置输入框的样式
with(input.style){
position = "absolute";
top = (obj.offsetTop + 1) + "px";
left = (obj.offsetLeft + 1) + "px";
width = (obj.offsetWidth - 18) + "px";
border = "0px";
}
obj.parentNode.insertBefore(input, obj);
input.value = obj.value;
obj.onchange = function(){
input.value = this.value;
}
var options_map = new Array();
input.onblur = function(){
var value = input.value;
if(value == ""){
return;
}
//判断当前输入的值在下列列表中是否存在，如果不存在，则新增项
if(typeof(options_map[value]) == "undefined"){
var option = new Option(value,value);
option.title = value;
obj.add(option);
//选中最后新加的一项
obj.selectedIndex = obj.options.length -1;
options_map[value] = value;
input.style.width = (obj.offsetWidth - 18) + "px";
}
}
//初始化下拉框的项
initOptions(obj, options_map);
}
function initOptions(obj,options_map){
var len = obj.options.length;
for(var i = 0 ; i < len ; i++){
var value = obj.options[i].value;
options_map[value] = value;
}
}
function getSelectedValue(){
var value =document.getElementById("sel2").value;
alert(value);
}
regInputSelect("sel2");
regInputSelect("input_select1",5);
regInputSelect("input_select2");
</script>
</body>
分享到：
相关推荐
在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...
简单javavscript实现的可输入下拉框（仿VC的comobox），用于html网页开发。 不懂代码的，可直接在页面中插入该源码实现，方便易用。
在网页设计中，"可输入下拉框"（通常称为Autocomplete或Typeahead下拉框）是一种增强用户体验的交互元素。传统的HTML `<select>` 标签仅允许用户从预定义的选项中选择，但可输入下拉框允许用户在输入时获取匹配建议...
以上就是两种创建可输入下拉框的方法。在实际项目中，可以根据需求和兼容性考虑选用合适的方式。同时，我们可以通过CSS来定制样式，使交互更加友好和美观。记得在开发过程中，始终以用户为中心，提供流畅、直观的...
将CheckBox Text两个空间结合，简易的制作可输入下拉框
开发者可能会利用库或框架，如React、Vue或Angular，它们提供了丰富的组件库，包括可输入下拉框的实现。这些框架允许开发者通过简单的配置和API调用来实现复杂的功能，比如事件监听、数据绑定和动态过滤。 在实际...
在IT行业中，"comBox可输入下拉框"是一种常见的用户界面组件，它结合了文本输入框和下拉选择框的功能。这样的设计旨在提供更灵活的用户体验，允许用户既可以手动输入值，也可以从预设的选项中进行选择。在网页开发中...
标题中的“可输入下拉框”通常指的是在网页或应用程序设计中的一种交互元素，它结合了文本输入框和下拉列表的功能。用户可以既可以直接在输入框中输入文本，也可以从下拉列表中选择已有选项，这种设计常用于提供用户...
在IT行业中，"可输入下拉框"是一种常见的交互元素，它结合了传统下拉列表与文本输入框的功能，让用户可以既从预设选项中选择，又可以直接输入自定义值。这种控件在网页和应用程序设计中十分常见，因为它们提高了用户...
本文将详细介绍"可输入下拉框jQuery插件"的相关知识点。 首先，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在本插件中，jQuery起到了核心作用，通过它的API和方法实现了...
本主题聚焦于一个特定的jQuery插件，即“可输入下拉框”插件，它提供了丰富的功能，如自动完成和模糊查询，极大地提升了用户在网页上的交互体验。 首先，我们要理解什么是“可输入下拉框”。传统的HTML下拉框（`...
二、可输入下拉框控件 为了实现一个可输入的下拉框，我们可以利用JavaScript或者jQuery库来增强原生的HTML下拉框。这样的控件允许用户在输入框中直接键入文本，同时仍然提供下拉列表供用户选择。当用户开始输入时，...
在这种情况下，“asp.net可输入可选择下拉框”应运而生，它结合了文本框和下拉框的优点，提供了更灵活的交互体验。 首先，我们需要理解这个自定义用户控件的工作原理。通常，它是通过JavaScript或者jQuery在客户端...
利用input框和select框的组合设计的可输入下拉框，并支持键盘按钮实现上下移动。
仿百度google的自动搜索可输入下拉框, 本人开发的， 网上的都不好用，郁闷，提手花了一天半呢
4. Vue.js、React等前端框架：它们提供了组件化开发方式，也有对应的可输入下拉框组件。 五、代码示例 以下是一个使用纯JavaScript实现的简单例子： ```html <option value="option1">Option 1 ...