Select編集可能-主要なブラウザを完全にサポート
5154 ワード
最近プロジェクトをして1つのselectの编集する需要があって、一时的に手を焼いて、ネット上で多くの解决案を探してすべて完璧ではありませんて、自分で1つ书くことができなくて、IEをテストして、FF、chromeはすべて支持します.ここで共有します.
実装原理はselectとinputで偽装されているが,スタイル処理にいくつかの改良がなされているにすぎない.
実装原理は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>