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

最新推荐文章于 2023-09-11 13:21:32 发布

你温柔的背后是心情的曲折

最新推荐文章于 2023-09-11 13:21:32 发布

阅读量349

点赞数

分类专栏： Html 文章标签： select html 可编辑select

本文链接：https://blog.csdn.net/u012758088/article/details/53021112

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现原理还是用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>