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

最新推荐文章于 2017-08-05 16:00:00 发布

weixin_34413802

最新推荐文章于 2017-08-05 16:00:00 发布

阅读量133

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Bulid-For-NET/archive/2013/06/08/3127191.html

版权

最近做项目有个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; width: 240px;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

weixin_34413802

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Select 可编辑 - 完美支持各大主流浏览器

最近做项目有个select可编辑的需求,一时棘手,网上找了很多解决方案都不完美,没办法自己写了一个,经测试IE,FF,chrome都支持。特此拿出来共享一下。实现原理还是用select和input伪装成的,只不过是在样式处理上做了一些改进。<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://...
复制链接

扫一扫