TEXT + SELECT（可编辑的select）

最新推荐文章于 2024-04-24 09:22:16 发布
VIP文章 最新推荐文章于 2024-04-24 09:22:16 发布
阅读量1.7k 收藏
点赞数
文章标签： div function javascript web开发 浏览器 input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jacklee408/article/details/2052817
版权

                                                 组合控件：TEXT + SELECT

         在web开发过程中，碰到了一个输入框并能选择数据项的问题，在网上找了好多资料，都未能找到一个满意的源码。最终决定自己写一个，之前也照了别人的代码，在此要感谢！但发现其功能、性能上不是很好。希望此代码给其他程序员带来帮助。

         其原理：TEXT控件显示在页面上，而SELECT隐藏起来，当用户单击TEXT时，触发onclick事件调用showSelect函数，函数内生成一个DIV，用于摆放在TEXT控件下方。再取得SELECT控件option内数据，以DIV方式插入到前一个DIV内，并控制DIV高度，当数据量多时以滚动条的方式显示，便于用户选择。

包含四个全局变量：
vDivConstant       --------        生成DIV的ID前缀，以便避免FORM内的ID重复

ie                            --------        检测是否IE浏览器

vPrevobj                --------        鼠标在TEXTSELECT中移动过程中前一个DIV对象

blnDivShow           --------      true显示，false隐藏，此变量之作用是为了单击其他地方时该控件隐藏。

js文件内函数：</

最低0.47元/天 解锁文章
jacklee408
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html select 可输入 可编辑
06-18
通过html元素层覆盖，实现一个可以输入，可以选择的一个select框，实际使用取值可以从text框中取值，如需从select框取值，请修改select的selectIndex以达到要求。
文本框中内容全部选中 select() 方法
笨鸟快飞的专栏
08-24 1836
Text select() Method Text Object Definition and Usage The select() method is used to select the content of a text field. Syntax textObject.select() Browser Support The select() me
python 遍历select下拉框，获取option标签中value和text的值
牛犊不怕虎的博客
08-28 4618
在写12306爬虫时，遇到选择座席信息时，需要遍历select下拉框获取其中的座席信息。 代码如下： seat_types = self.driver.find_element_by_xpath('.//select[starts-with(@id,"seatType")]') seat_ptions_list = seat_types....
python 爬虫之select用法
qq_22592457的博客
07-09 1万+
在python爬取数据时，通过requests和BeautifulSoup把网页内容解析下来是第一步，这一步通常很简单，数据爬取的重头戏主要集中在所需内容的精准定位上，定位元素的方式有多种，今天主要讲一下select的用法。 需要注意一点，select用法会将所有满足条件的值取出，组成一个list select定位元素有5种方式： 一、通过标签名查找 用法：soup.select(标签名)...
python：BeautifulSoup select()/select_one() 用法总结
ggwxk1990的博客
12-29 1万+
BeautifulSoup select()/select_one() 用法总结：html_doc = """ <html><head><title>The Dormouse's story</title></head> <body> <p class="title"><b>The Dormouse's story</b></p><p class="story">Once upon a time t
Python中使用xpath获取select option的每一行的text和value
北辰
06-03 2373
from lxml import etree import json xml_data = etree.HTML(r.text) seat_ptions_list = xml_data.xpath('//*[@id="hsCode"]/option') # for option in seat_ptions_list: # print("Value is: " + option.attrib['value']) # p...
selenium + python处理select标签下拉框的选项
热门推荐
Kosmoo的博客
01-29 1万+
selenium + python处理select标签下拉框的选项 1. 背景 在爬取网页是，有时候我们会遇到下图中的下拉框，也就是 标签。按照一般的点击方案是无法成功的，而selenium提供了专门的Select类来处理这种下拉框。 2. 环境 python 3.6.1 系统：win7 IDE：pycharm 安装过chrome浏览器 配置好chromedriver s
mysql处理和powerquery_数据可视化之PowerQuery篇（五）PowerQuery文本处理技巧：移除和提取...
weixin_42396058的博客
02-07 857
每当拿到原始数据，不如意十有八九，快速准确的清洗数据也是必备技能，数据清洗正好是 PowerQuery 的强项，本文就来介绍两个常用的 M 函数：Text.Remove 和 Text.Select。看到以 Text 开头的，就知道是文本处理函数，比如原始数据如下，如果只想要中文名，就是把英文字母都去掉，可以用Text.Remove函数，添加自定义列，姓名=Text.Remove([客户],{"A"...
单行、多行输入框，其属性及功能场景
Android起跑线
09-30 4163
---单行输入框 editText1.setSingleLine(); editText1.setEms(10); editText1.setFilters(new InputFilter[] { new InputFilter.LengthFilter(5) });
Power Query M语言全部Text函数（字符串函数）分类，快速掌握
HGData的专栏
02-27 1万+
一、通过帮助找出所有的Text函数 通过在查询编辑输入”=#shared”调出帮助，然后提取列，筛选出所有的Text类函数 二、各类Text函数 Text类函数：总共41个，可分为text基本信息查看，text选择、text判断、text操作、text转换几类。 基本信息： 类型 函数名 分类 说明...
TEXT+SELECT
01-19
TEXT+SELECT组合控件功能强大，性能效率高！
两个select之间option的互相添加操作(jquery实现)
10-29
两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.
可编辑下拉框（html）
10-21
可编辑下拉框，用javascript 实现
jQuery+PHP实现可编辑表格字段内容并实时保存
11-22
本例适用场景：当查看详细资料，如...可自定义输入表单类型，目前jeditable提供text,select,textarea类型。 响应键盘的回车和ESC键。 插件机制，本例提供与jquery ui的datepicker日历控件的整合。 下面我们来一步步讲解
Sublime Text2.1 可添加windows8
06-21
Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但目前可以无限期试用）也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可...
为Yahoo! UI Extensions Grid增加内置的可编辑器
12-03
它给你一个基本的TEXT FIELD，一些CHECKBOXS或者是Select fields,这导致了你一边单击某个字段在编辑，另一边厢插入一个FORM到这个单元格之中，不知不觉地，会出现越来越多编辑过的“脚印footprint”,尤其是IE，在很...
react-bootstrap-editable：清理可编辑的bootstrap组件以进行React。 内置的ajax支持
01-30
React Bootstrap可编辑清洁可编辑的引导程序组件以进行React。 Ajax支持！ 检查 非常感谢所有反馈。 如果您有任何建议，想要查看功能的实现或遇到任何错误，请随时安装npm i react-bootstrap-editable 您还将在项目...
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 731
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1094
​​​​​​​。
Vue3+ElementUI使用el-select multiple 单选或多选后点击编辑后回显
06-10
如果你使用Vue3和ElementUI的el-select组件的multiple属性进行单选或多选，然后想要实现点击编辑后回显的功能，可以通过以下步骤实现： 1. 给el-select绑定一个v-model，用来存储选择的值。 2. 在点击编辑按钮后，将v-model中的值赋给一个临时变量，用来记录编辑前的选择结果。 3. 将el-select的multiple属性设置为false，变为单选状态。 4. 将临时变量的值赋给el-select的v-model，将选择结果回显到el-select中。 5. 编辑完成后，将el-select的v-model的值赋给临时变量，并将multiple属性设置回原来的状态。 下面是一个简单的示例代码： ```html <template> <div> <el-select v-model="selected" multiple> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> <el-button @click="edit">编辑</el-button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const selected = ref([]) // 存储选择结果的数组 const tempSelected = ref([]) // 临时存储编辑前的选择结果的数组 const edit = () => { // 记录编辑前的选择结果 tempSelected.value = [...selected.value] // 将multiple属性设置为单选 const select = document.querySelector('.el-select__tags-text') if (select) { select.setAttribute('contenteditable', 'true') select.setAttribute('data-placeholder', '请选择') } // 将选择结果回显到el-select中 selected.value = tempSelected.value[0] } const done = () => { // 将编辑后的结果赋给临时变量 tempSelected.value[0] = selected.value // 将multiple属性设置回原来的状态 const select = document.querySelector('.el-select__tags-text') if (select) { select.removeAttribute('contenteditable') select.removeAttribute('data-placeholder') } } return { selected, tempSelected, edit, done } } } </script> ``` 在上面的代码中，我们使用了Vue3的Composition API对组件进行了重构。我们使用了ref来定义了存储选择结果的数组和临时变量的数组，并在edit和done方法中使用了箭头函数。在edit方法中，我们使用了document.querySelector来获取el-select的DOM元素，然后将其设置为contenteditable，使其变为可编辑的状态。同时，我们将multiple属性设置为false，变为单选状态，并将临时变量的值赋给el-select的v-model，实现了回显选择结果的功能。在done方法中，我们将编辑后的结果赋给临时变量，并将multiple属性设置回原来的状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值