晨港飞燕刘彦登

编程技术

首页 归档 关于 联系

📢 欢迎来到我的博客！这里主要分享编程技术相关内容，如有问题欢迎留言讨论~

HTML可编辑的select



HTML可编辑的select实现原理还是用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 type="text/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: 60%;width: 80%; z-index:88; position:absolute; left:10%; top:23%;" onchange="changeF();">
    <option value="0">0</option>
    <option value="0.85">0.85</option>
   </select>
  <input type="text" id="txt" value="" style="position:absolute; width:66%; height:50%; left:11%;top:25%;z-index:99; border:1px #FFF solid" />   
 </div>
</body>
</html>



posted @ 2016-08-27 17:53  晨港飞燕刘彦登  阅读(473)  评论(0)    收藏  举报