可编辑下拉框（ie6/chrome）

可编辑下拉框，思路：一个input,一个select,位置重叠，input在上，宽度微调到如下效果：

问题：ie6下select的层级高bug.

解决办法：添加个空的iframe，用iframe遮住select，再用input遮住iframe。

另外ie6下select无法用css设置高度，需微调下其余控件高度以达到一致。

html:

    <div id="wrapper">        
            <input type="text" id="txtItem" />
            <iframe></iframe>
            <select id="optItem">
                <option value="1">opt1</option>
                <option value="2">opt2</option>
                <option value="3">opt3</option>
            </select>
    </div>

js:

　　var opt = document.getElementById("optItem");
　　var txt = document.getElementById("txtItem");
　　opt.onchange = function(){
    　　txt.value = opt.options[opt.selectedIndex].text;
　　};

css:

　　* {padding:0;margin:0;}
　　#wrapper {position:relative;width:10em;margin:10px;z-index:0;height:1.3em;}
　　#optItem {position:absolute; width:100%;z-index:0;height:100%}
　　#txtItem {position:absolute;width:90%;z-index:2;height:100%;}        
　　iframe {visibility:hidden;_visibility:visible; position:absolute; width:90%; z-index:1;height:100%;}