Select 可编辑 - 完美支持各大主流浏览器

最近做项目有个select可编辑的需求,一时棘手,网上找了很多解决方案都不完美,没办法自己写了一个,经测试IE,FF,chrome都支持。特此拿出来共享一下。

实现原理还是用select和input伪装成的,只不过是在样式处理上做了一些改进。

<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><script language="javascript">  function changeF() {document.getElementById('txt').value = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value;
} 
</script>  
</head>
<body><div style="position:relative; width240px;height:20px;margin-bottom:10px;margin-left:26px;">
  <select id="sel"  style="float: right; height: 22px;width: 140px; z-index:88; position:absolute; left:100px; top:0px;" onchange="changeF();">
<option value="111">111</option>
<option value="222">222</option>

<option value="333">333</option>
</select><input type="text" id="txt" value="" style="position:absolute; width:118px; height:14px; left:101px;top:1px;z-index:99; border:1px #FFF solid" />  
</div>
</body>
</html>

转载于:https://www.cnblogs.com/Bulid-For-NET/archive/2013/06/08/3127191.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件外包平台用例图

简要概括软件外包平台主要的用例以及其用例描述、类图、时序图、 用例图如下&#xff1a; 用例描述如下&#xff1a; “注册”用例描述 标题 说明 用例名称 注册 用例标识号 1 简要说明 使用此平台先进行注册成为用户 前置条件 无 基本事件流 1.判断用户注册的信息…

LeetCode 473. 火柴拼正方形(回溯)

文章目录1. 题目2. 解题1. 题目 还记得童话《卖火柴的小女孩》吗&#xff1f;现在&#xff0c;你知道小女孩有多少根火柴&#xff0c;请找出一种能使用所有火柴拼成一个正方形的方法。 不能折断火柴&#xff0c;可以把火柴连接起来&#xff0c;并且每根火柴都要用到。 输入为…

web基础编程-图片管理网站

图片艺廊管理网站说明 数据库设计&#xff1a; 主要由三张表&#xff1a;用户表、图片表、用户图片对应关系表。 用户表&#xff1a; 主要字段如下&#xff1a; 用户ID 整型 主键 自增长&#xff1b; 用户姓名 字符型 &#xff1b; 用户密码 字符型 &…

HDOJ 1494 跑跑卡丁车

跑跑卡丁车Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 1778 Accepted Submission(s): 583Problem Description跑跑卡丁车是时下一款流行的网络休闲游戏&#xff0c;你可以在这虚拟的世界里体验驾驶的乐趣。…

LeetCode 375. 猜数字大小 II(DP)

文章目录1. 题目2. 解题1. 题目 我们正在玩一个猜数游戏&#xff0c;游戏规则如下&#xff1a; 我从 1 到 n 之间选择一个数字&#xff0c;你来猜我选了哪个数字。 每次你猜错了&#xff0c;我都会告诉你&#xff0c;我选的数字比你的大了或者小了。 然而&#xff0c;当你猜…

网络命令使用

实验目的 1&#xff0e;掌握基本的网络命令&#xff0c;并了解其在网络领域的作用。 2&#xff0e;学习使用网络命令&#xff0c;并了解其参数的含义。 实验要求 1&#xff0e;要求不仅能会使用网络命令&#xff0c;并能在实际网络操作中灵活运用。 2&#xff0e;能将基本…

python中的range与list函数

使用python的人都知道range()函数很方便&#xff0c;今天再用到他的时候发现了很多以前看到过但是忘记的细节。 这里记录一下range(),复习下list的slide&#xff0c;最后分析一个好玩儿的冒泡程序。 这里记录一下&#xff1a; >>> range(1,5) #代表从1到5(不包含5)[1,…

LeetCode 546. 移除盒子(DP)*

文章目录1. 题目2. 解题1. 题目 给出一些不同颜色的盒子&#xff0c;盒子的颜色由数字表示&#xff0c;即不同的数字表示不同的颜色。 你将经过若干轮操作去去掉盒子&#xff0c;直到所有的盒子都去掉为止。 每一轮你可以移除具有相同颜色的连续 k 个盒子&#xff08;k > …

转 php 观察者模式

<?php /** * 观察者模式 *//** * 抽象主题角色 */ interface Subject {/** * 增加一个新的观察者对象 * param Observer $observer */ public function attach(Observer $observer);/** * 删除一个已注册过的观察者对象 * param Observer $observer */ public function det…

配置VLAN以及配置VTP;

实验目的 配置VLAN; 通过VLAN Trunk配置跨交换机的VLAN; 配置VTP; 查看上述配置项目的有关信息。 设备需求 本实验需要以下设备&#xff1a; Cisco Catalyst 2950系列交换机2台&#xff0c;型号不限; 交叉线序网线1条; 1台带有超级终端程序的PC机&#xff0c;以及Cons…

python中的随机函数random

一、random模块简介 Python标准库中的random函数&#xff0c;可以生成随机浮点数、整数、字符串&#xff0c;甚至帮助你随机选择列表序列中的一个元素&#xff0c;打乱一组数据等。 二、random模块重要函数 1 )、random() 返回0<n<1之间的随机实数n&#xff1b; …

LeetCode 1140. 石子游戏 II(DP)*

文章目录1. 题目2. 解题1. 题目 亚历克斯和李继续他们的石子游戏。许多堆石子 排成一行&#xff0c;每堆都有正整数颗石子 piles[i]。游戏以谁手中的石子最多来决出胜负。 亚历克斯和李轮流进行&#xff0c;亚历克斯先开始。最初&#xff0c;M 1。 在每个玩家的回合中&…

在Ubuntu上下载、编译和安装Android 4.2 最新内核源代码(Linux Kernel)

根据http://blog.csdn.net/luoshengyang/article/details/6564592博客内容对android4.2的编译 从源代码树下载下来的最新Android源代码&#xff0c;是不包括内核代码的&#xff0c;也就是Android源代码工程默认不包含Linux Kernel代码&#xff0c;而是使用预先编译好的内核&…

Python中的Number(数字)

Python Number 数据类型用于存储数值。 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值&#xff0c;将重新分配内存空间。 以下实例在变量赋值时 Number 对象将被创建&#xff1a; var1 1 var2 10 您也可以使用del语句删除一些 Number 对象引用。 del语句的…

LeetCode 1550. 存在连续三个奇数的数组

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 arr&#xff0c;请你判断数组中是否存在连续三个元素都是奇数的情况&#xff1a;如果存在&#xff0c;请返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;arr [2,6,4,1] 输出&…

配置RIP实验

实验目的 掌握RIPv1和v2配置方法 掌握show ip rip database、sh ip protocol命令 掌握debug命令 掌握将RIP的广播更新方式更改为单播方式 设备需求 本实验需要以下设备&#xff1a; 4台2811Cisco路由器&#xff0c;四台都有两个FastEthernet口。 2条双绞线&#xff0c;…

LeetCode 1551. 使数组中所有元素相等的最小操作数(等差数列)

文章目录1. 题目2. 解题1. 题目 存在一个长度为 n 的数组 arr &#xff0c;其中 arr[i] (2 * i) 1 &#xff08; 0 < i < n &#xff09;。 一次操作中&#xff0c;你可以选出两个下标&#xff0c;记作 x 和 y &#xff08; 0 < x, y < n &#xff09;并使 arr…

协议数据分析

实验目的 了解协议分析仪的使用方法和基本特点。 增强对网络协议的理解。 实验要求 要求在进行协议数据分析后&#xff0c;能够将网络数据与具体的网络操作相互映证&#xff0c;如实的记录实验结果&#xff0c;完成实验 实验环境 1&#xff0e;一台运行Windows 2000的计算机…

python中的面向对象

Python 面向对象 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。现在介绍Python的面向对象编程。 如果你以前没有接触过面向对象的编程语言&#xff0c;那你可能需要先了解一些面向对象语言的一些基本特…

会计基础第二次模拟试题(1)

会计基础第二次模拟试题(1) 会计基础第二次模拟试题(1) 之前我们整理了一部分会计基础的模拟题&#xff0c;下面是之前的文章列表&#xff0c;请大家多提建议&#xff1a; 会计基础第一次模拟题会计基础一 会计基础模拟练习2 会计基础模拟试题三 会计基础4 会计基础5 会计基础6…