<HTML>
<HEAD>
<TITLE>editable dropdown</TITLE>
</HEAD>
<BODY>
<table border="5" cellspacing="5" bordercolor="#00DF55" bgcolor="#A0A0A4">
<tr>
<td width="183"> </td><br>
<td width="248"> </td></tr>
<tr>
<td> </td><br>
<td><label id="labelObj"></label><select id="selectObj" style="position:absolute;top:10px; left:10px;"
onchange=textObj.value=this.options[this.selectedIndex].value >
<OPTION value="" selected>选择邮箱</OPTION> <OPTION
value=sina.com>sina.com</OPTION> <OPTION
value=sohu.comsohu.com123456478946>sohu.com1234564789</OPTION> <OPTION
value=tom.com>tom.com</OPTION> <OPTION
value=126.com>126.com</OPTION> <OPTION
value=163.com>163.com</OPTION> <OPTION
value=yahoo.com.cn>yahoo.com.cn</OPTION> <OPTION
value=kingsoft.com>kingsoft.com</OPTION></SELECT>
<input type="text" id="textObj" style=" top:10px; left:10px; background-color:#00FF00"">
</td>
</tr>
<tr>
<td> </td>
<td> </td></tr>
<tr>
<td> </td>
<td> </td></tr>
</table>
</BODY> <script language="javascript">
function test() {
var selectObj1 = document.getElementById("selectObj");
var textObj1 = document.getElementById("textObj");
var topObj = document.getElementById("labelObj");
var topSize = 0;
var leftSize = topObj.offsetLeft;
while (topObj.offsetParent != null) {
topSize+=topObj.offsetParent.offsetTop;
leftSize+=topObj.offsetParent.offsetLeft;
topObj = topObj.offsetParent;
}
selectObj1.style.width = selectObj1.clientWidth;
textObj1.style.width = selectObj1.clientWidth-18;
try{
selectObj1.style.top = topSize+3;
selectObj1.style.left = leftSize+1;
leftSize += selectObj1.clientWidth;
selectObj1.style.clip="rect(0px, "+leftSize+", "+selectObj1.clientHeight+", "+textObj1.style.width+")";
} catch (e){alert(e);}
}
test();
</script>
</HTML>
分享到：
相关推荐
一种常见的方法是创建一个组合控件，包含一个输入框和一个下拉列表。当用户开始在输入框中输入时，下拉列表会动态过滤出匹配的选项。用户可以选择列表中的一个项，或者继续输入以创建新的值。这种设计通常需要监听...
自制的jquery插件，只需要一行代码，即可将select控件变成一个即可以输入也可以选择的元素，输入时也会有智能提示。对原来的select的操作完全没有改变，取值依然是取select的值，设置选中，添加项删除项等等都没有...
首先，我们创建一个基础的HTML结构，包括一个`<input>`文本框和一个隐藏的`<select>`元素。`<input>`将用于用户输入自定义文本，而`<select>`则用于存储预设的选项。例如： ```html <div class="select-edit-...
4. 现代前端框架实现：如果是React、Vue等框架，会涉及组件化编程思想，以及如何创建一个自定义的可输入select组件。 5. 数据处理：如何存储和管理用户输入的数据，以及如何根据用户输入实时过滤和显示选项。 6. ...
可以使用 `$("#select_id").append("<option value='Value'>Text</option>")` 方法添加一个 Option 项。 2. 插入一个 Option 项： 可以使用 `$("#select_id").prepend("请选择</option>")` 方法插入一个 Option 项...
数据源中的每个项应包含一个或多个字段用于匹配用户输入。 2. **匹配算法**：控件可以配置匹配策略，比如基于用户输入的前缀、模糊匹配或者完全匹配。 3. **自定义渲染**：通过回调函数，你可以定制每个选项的展示...
在源码层面，开发者可能会创建一个自定义组件，该组件包含一个隐藏的`<select>`元素和一个可见的`<input>`元素。`<input>`用于用户输入，而`<select>`则展示预定义的选项。当用户在`<input>`中输入时，组件会检查...
在开发"TEXT+SELECT"控件时，开发者需要注意几个关键点：第一，确保输入和选择的交互流畅，避免出现延迟或卡顿；第二，要对用户输入进行验证，防止无效数据的提交；第三，合理设计默认选项和提示信息，帮助用户快速...
`bootstrap-select`是一个基于Bootstrap的下拉框增强插件，它提供了丰富的自定义选项和交互性，包括搜索功能。这个插件允许用户在下拉框中输入文字，系统会实时地进行模糊匹配，展示与输入文字相关的选项，极大地...
标题“从一个select到另一个select”暗示了我们讨论的主题与SQL查询有关，特别是涉及如何将一个SELECT查询的结果作为另一个查询的基础。在这个场景中，我们通常会使用子查询或者联接操作来实现这样的转换。让我们...
`Element UI`是一个广泛使用的开源UI框架，它提供了许多预设的、美观的组件，如`Select`（下拉选择器）和`Tree`（树形结构）。在某些场景下，开发者可能需要将这两种组件结合，以满足特定的需求，例如实现一个既具备...
antd form 封装可搜索可输入select
一个常见的需求是实现一个可编辑的`<select>`下拉框，即允许用户不仅能从下拉列表中选择选项，还能直接输入文本。这种组件结合了传统`<select>`控件的选择功能和`<input>`控件的自由文本输入能力，从而提供更加灵活...
如资源名，使用JAVASCRIPT动态创建一个Select元素和text元素
以下是一个关于如何在`<select>`和`<option>`中添加自定义图片的详细教程。 首先，我们需要理解HTML基础。`<select>`元素创建一个可选列表，用户可以选择其中的一个或多个选项。`<option>`元素定义了下拉列表中的一...
每个数据项通常包含一个id和text属性，其中text代表显示给用户的文本，id用于存储与之对应的值。在Select2中，每个数据项可能还包含一个children属性，用来表示有层级关系的选项。这在本实例中通过嵌套的字典来实现...
在"bootstrapvalidator表单验证 + select2 拼音模糊匹配 demo"这个项目中，开发者旨在结合BootstrapValidator与select2插件，实现一个具有高可用性和用户体验的前端表单。 BootstrapValidator提供了多种内置验证...
子查询`(select au_id from titleauthor)`获取所有出版过书籍的作者ID，并将这些ID组成一个列表。外部查询再利用这个列表筛选出所有出版过书籍的作者信息。 #### 五、子查询与其他查询方式的对比 尽管子查询非常...
- `selectId.add(new Option("第一个", "1"))`：创建一个新的`Option`对象，其中第一个参数是`text`，第二个参数是`value`，然后将其添加到`selectId`下拉列表中。 3. **`onchange`事件**：当用户更改`<select>`的...
"selectbox 插件，即可选择又可输入"是一个专为提升用户体验设计的JavaScript插件，它结合了传统的下拉选择框（select box）功能和自由输入文本框（input field）的特性，使得用户既可以方便地从预设选项中选择，也...