可编辑html select 下拉菜单

最新推荐文章于 2022-07-18 19:50:08 发布
最新推荐文章于 2022-07-18 19:50:08 发布
阅读量4.2k 收藏
点赞数
分类专栏： HTML 文章标签： html javascript function input table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a385833253/article/details/6583997
版权
 <HTML>
　　<HEAD>
　　 <SCRIPT LANGUAGE="javascript">
　　</SCRIPT>
　　<SCRIPT LANGUAGE="javascript">
　　function Body_Init(oSelect,oText)
　　{
　　var iLeft= oSelect.offsetLeft;
　　var iTop = oSelect.offsetTop;
　　var iWidth=oSelect.clientWidth;
　　var iHeight=oSelect.clientHeight;
　　oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')';
　　oText.style.width=iWidth;
　　oText.style.height=iHeight;
　　oText.style.top =iTop;
　　oText.style.left=iLeft;
　　}
　　function Combo_Select(oSelect,oText)
　　{
　　oText.value=oSelect.options[oSelect.selectedIndex].text;
　　alert(oText.value);
　　}
　　function Text_ChkKey(oSelect,oText)
　　{
　　if(event.keyCode==13)
　　{
　　 var nIndex=HasTheValue(oText.value,oSelect);
　　 if(nIndex !=-1 && nIndex !=oSelect.selectedIndex)
　　 {
　　 oSelect.selectedIndex=nIndex;
　　 }
　　}
　　}
　　function HasTheValue(name,oSelect)
　　{
　　if(oSelect.options.length<1)
　　 return -1;
　　var i=0;
　　for(i=0;i<oSelect.options.length;i++)
　　{
　　 if(oSelect.options[i].text==name)
　　 return i;
　　}
　　return -1;
　　}
　　</SCRIPT>
　　</HEAD>
　　<BODY οnlοad="javascript:Body_Init(pCombo,pText);">
<table width=50% width=50% align="center" valign="middle">
　　<tr><td>
　　 <SELECT STYLE="position:absolute;left:0;top:0;" ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" >
　　 <option value="d">test1</option>
　　 <option value="dd">test2</option>
　　 <option value="dd">asds</option>
<option value="dd">awdfsfs</option>
　　 </SELECT>
　　 <INPUT STYLE="position:absolute;" onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText">
　　 </td></tr>
　　 </table>
　　 </BODY>
　　</HTML>
a385833253
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中select允许手工编辑,HTML中Select的使用詳解
weixin_31708613的博客
06-21 589
CalicoTortieSiameseBMWPorscheMercedes寶馬保時捷大奔附：一些Select的技巧1.動態創建selectfunction createSelect(){var mySelect = document.createElement("select");mySelect.id = "mySelect";document.body.appendChild(mySelect...
html自带搜索的下拉框 datalist标签
m0_49191104的博客
10-28 4785
2.可以对值和选项进行搜索；（这也是过多的展示了多余的信息）1.使得下拉框可以自带搜索（这极大的便捷了用户输入）在下拉框选则使用时，选项较多比较难以查找。
可输入可选择的下拉列表
mikemiller2的专栏
01-02 786
js实现可输入的下拉框 德国 挪威 瑞士
html select标签的属性和方法
热门推荐
chinmo的收藏
04-15 2万+
html select标签的属性： 标签属性 属性 描述 ACCESSKEY accessKey 设置或获取对象的快捷键。
HTML下拉搜索，select筛选搜索
u014644574的博客
07-07 1万+
jQuery实现下拉搜索 点击输入框显示所有option option选项可滚动，已隐藏滚动条 输入框动态监听并筛选option <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉搜索</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.m
实现可编辑的select
07-21
position: 'bottom', // 下拉菜单的位置 filter: true, // 开启搜索 onItemAdd: function(value, item) { // 添加新选项后的回调 console.log('添加了选项:', value); } }); ``` 5. **事件监听**：Editable ...
js动态设置select下拉菜单的默认选中项实例
10-18
今天小编就为大家分享一篇js动态设置select下拉菜单的默认选中项实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
React下拉选择可自定义的下拉菜单用于做出React特征可通过prop s配置通过渲染道具回调（可访问内部道具，状态和方法），所有内部组件的总自定义组件覆盖可通过CSS（或自定义组件）设置样式门户支持在本地DOM树之外...
下拉菜单jquery.editable-select-master
11-14
jQuery.editable-select-master是一款基于jQuery的可编辑下拉菜单插件，它为用户提供了一种灵活、可定制的方式来创建和管理下拉选项，同时提供了丰富的功能和良好的用户体验。 jQuery.editable-select-master的核心...
bootstrap可编辑下拉框jquery.editable-select
10-19
这个组件基于流行的前端框架Bootstrap和JavaScript库jQuery，使得在Web应用中创建交互式、可编辑的下拉菜单变得更加简单。 首先，要使用jQuery.editable-select，你需要在HTML页面中引入相应的CSS和JS文件。在给定...
html select 可输入 可编辑
06-18
通过html元素层覆盖，实现一个可以输入，可以选择的一个select框，实际使用取值可以从text框中取值，如需从select框取值，请修改select的selectIndex以达到要求。
可编辑下拉框（html）
10-21
可编辑下拉框，用javascript 实现
Html 实现可编辑下拉
Lvkaiwen的博客
06-27 492
最近项目需要实现一个功能 实现类似于这样的效果 首先 是获取该用户可以看到的列表的集合 function search() { $.ajax({ url: "用户自定义" + Math.random(), success: function (r) { if (r != '' &am...
HTML中三种下拉列表的写法
qq_48643318的博客
07-18 6515
HTML中三种下拉列表的写法
html如何设置下拉列表
不负韶话
05-24 2万+
一.html中的下拉列表介绍 可以用许多方法完成下拉列表的功能。介绍在htlm中下拉列表的实现，html中下拉列表由select和option这两个表单标签一起使用来完成下拉功能的。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>e易行</title> </head> <body style="text-align
HTML实现可编辑下拉框
idomyway的博客
01-16 2万+
前言在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能 思想： 通过绝对定位实现input覆盖Select 通过change事件实现数据的单向绑定 效果图代码<html> <head> <title>可编辑下拉框</title> <meta charset="UTF-8" />
html搜索框下拉怎么做,js实现带搜索功能的下拉框
weixin_39848097的博客
06-03 2318
本文实例为大家分享了js实现带搜索功能的下拉框，供大家参考，具体内容如下1、介绍在实现下拉框的时候，如果用select+option可以在满足pc端的需求，但如果需应用到手机端，由于select的样式太丑。所以接下来利用div+p实现到输入文本的下拉框2、思路1 利用一个input充当搜索框，div+p充当下拉框放置于input的下方。如图所示：2 接下来就是js的实现了，我们先把红色区域的div...
HTML可编辑下拉框的实现
小王同志的博客
01-13 5257
直接上代码：<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css"> .iInput{ position: absolute; width: 99px;
HTML可编辑的select
晨港飞燕的专栏
08-27 5942
HTML可编辑的select实现原理还是用select和input伪装成的!
html的select框可编辑
最新发布
09-07
HTML 的 select 元素是一...综上所述，HTML 的 select 元素可以通过添加 contenteditable 属性来实现可编辑的下拉菜单框。这为用户提供了更多自由编辑选项的机会，但需要注意兼容性问题，并自行处理用户输入值的保存。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值