TEXT和Select的结合

最新推荐文章于 2021-06-07 19:12:06 发布
原创 最新推荐文章于 2021-06-07 19:12:06 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#server #buffer #import #system #input #html

本文介绍了一种结合文本输入与下拉选择功能的选择框实现方式，通过客户端代码实现了一个既能手动输入又能通过下拉菜单选择选项的功能，提高了用户交互体验。

想让选择框能像text一样输入，又能下拉选择，客户端就使用这样的代码了：

<%@ Page Language="C#" Debug="True" Strict="True" Explicit="True" Buffer="True"%>
<%@ Import Namespace="System" %>

<html>

<body bgcolor="#FFFFFF" topmargin="0" marginheight="0">

<form runat="server" method="">
<table><tr><td>
<input type="text" size="41" name="new_tips"><span style="WIDTH: 18px">
<select id="lstBox_new_tips" style="MARGIN-TOP: -2px; MARGIN-LEFT: -281px; WIDTH: 299px"
runat="server" onchange="document.all.new_tips.value=this.options[this.selectedIndex].value"  >
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
</td></tr></table>
</form>
 
</body>
</html>

TEXT + SELECT（可编辑的select）
jacklee408的专栏
01-19 1829
                                                 组合控件：TEXT + SELECT         在web开发过程中，碰到了一个输入框并能选择数据项的问题，在网上找了好多资料，都未能找到一个满意的源码。最终决定自己写一个，之前也照了别人的代码，在此要感谢！但发现其功能、性能上不是很好。希望此代码给其他程序员带来帮助。         其
ThinkPHP5.0(三)基于ThinkPHP5.0下的二级联动，实现不刷新页面的情况下根据一个下拉框的选项，改变另一个下拉框的选项
define_LIN的博客
07-15 2218
二级联动或者三级联动 顾名思义多个下拉框的联动，就是当一个父级下拉框某个选项被选中后可以影响其子下拉框中的值。 例如当我们在选择地址的时候，但我们在一个下拉框选择好省份后，接下来的市级下拉框里面的选项会变为对应省的市级，这就是一个二级联动。 实际需求 我在项目中遇到的需求是根据用户选中男女的下拉框的选项，读取数据库中不同的男女项目到运动项目的下拉框中。 HTML： 其中因为男女下拉...
一个可一输入的Select（select和text组合）
ly_wen00的专栏
09-30 324
[code] editable dropdown 选择邮箱 sina.com sohu.com1234564789 tom.com 126.com 163.com yahoo.com.cn kingsoft.com
select 下拉框 值和文本text均获取
lvhongfen的专栏
11-11 2735
资源Resource对象中同时有类别Category对象的categoryid,categoryname字段 然后页面的添加修改Resource的时候显示如下： 如果以前做的时候： （1）在Action中从resource对象取出categoryid 的值Int cateid=resource.getCategoryid()； （2）根据categoryid查出category对象Ca
select 动态html text,html-Select
weixin_36110344的博客
06-07 253
动态添加optionoption-1option-2option-3新增列表项值：内容：function inserItem(){var val = document.getElementById("val").value;var txt = document.getElementById("txt").value;var sel = document.getElementById("mySel"...
如何获得select被选中option的value和text和......
WARGON的博客
09-24 3508
例： &lt;select id="select"&gt; &lt;option value="A" url="http://www.baidu.com"&gt;第一个option&lt;/option&gt; &lt;option value="B" url="http://www.qq.com"&gt;第二个option&
jquery控制select的text/value值为选中状态
12-09
若要获取SELECT当前选中项的文本，可以使用`find()`和`:selected`选择器结合`text()`方法： ```javascript var currentText = $(“.selector”).find("option:selected").text(); ``` 这将返回SELECT中选定...
JavaScript获取select中text值的方法
10-20
在JavaScript中获取`<select>`元素选中项的文本值可以通过`this.options[this.selectedIndex].text`来实现。这在网页交互中非常常见，比如用于验证用户输入、展示提示信息或者根据用户选择执行相应操作。熟练掌握...
JS获取select的value和text值的简单实例
10-26
总结来说，获取select元素中的选项的value和text值是前端开发中的一个基础技能，通过本文的介绍和示例代码，我们可以看到如何使用原生JavaScript来实现这一功能。通过操作DOM元素并添加适当的事件监听器，我们可以...
TEXT+SELECT
01-19
这种组合控件结合了文本输入框（TEXT）和下拉选择器（SELECT）的功能，为用户提供更灵活、高效的输入方式。下面我们将详细探讨这种控件的特性和应用场景。 首先，文本输入框（TEXT）允许用户自由输入文本，适用于...
C# 实现 TextBox内容全部选择的效果 select()
weixin_34163553的博客
04-24 1445
TextTest.Attributes["onFocus"] = "javascript:this.select();"; 转载于:https://www.cnblogs.com/ccsbb/archive/2013/04/24/3040252.html
select通过text的值来进行选定来进行
小猪猪and小马马的博客
04-15 3390
var selectVal = $(this).val(); $("#ipinfo").text(selectVal);  //第一种$("#s0").find("option[text='"+($(this).val())+"']").attr("selected", "selected"); //第二种   $("#s0 option").each(
table表格动态拼接select,并获得选中的value和text
林sanity
02-15 1128
拼接select:下拉选项的值来自于对象中的集合。用c标签来遍历需要的数据，为了方便使用，varStatus属性可以方便我们实现一些与行数相关的功能 &lt;c:forEach var="lineMsg" items="${sony3A4RLineBeanList}" varStatus="status"&gt; &lt;td class="tdOption" align=&quot
input text表单中嵌入select选项的方法
零风の后花园
08-04 6202
利用 bootstrap 提供的 input-group 可以实现，代码如下 Inches           Feet           mm
下拉框与文本框重叠，即可以录入又可以选择的效果。
dfsafsd32323的博客
07-02 461
<div style="position:relative;"> <span style="margin-left: 100px; width: 18px; overflow: hidden;"> <select id="brand" name="brandId" style="width:150px; margin-left:-100...
TEXT+SELECT：兼具文本与选择功能的高效控件
将TEXT和SELECT结合起来，就可以得到一种复合型的用户界面组件。这种组件可以让用户在同一个控件中输入文本，并从下拉列表中选择数据，这样做有几个优势： 1. **空间优化**：结合使用 TEXT 和 SELECT 控件可以减少...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晚上吃酱牛肉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值