今天真的很'瞎'也，整整一个下午都没能解决一个问题，而且是一开始都没有明白需求，幸好做到半路上发现个问题问了下Earth，发现原来自己一直都没有明白要做什么？哎，悲哀！为什么我的沟通和理解能力这么差呢？怪不得现在还是一个人。。。其实是一个很小问题拉，算是css样式问题，在IE6里面select会覆盖遮挡在所有元素之上，现在有一个select，想要把它做成可选值又可手动输入值的，但是它又没有一个属性来标识可输入的功能，所有只能新加个text文本输入框，控制的实现和隐藏来模式实现这个功能，但是这个功能竟然搞了我一下午，白拿工资了。。。

要实现的效果如下：

代码如下：

<div class="select">
    fdExt<select id="drpName" name="drpName" onchange="eChoose(this.value)" >
        <option value="">自己输入</option>
        <option value="a">a项</option>
        <option value="b">b项</option>
    </select>
    <input type="text" id="txtName"  class="text" value="" />
    <input type="button" id="btnSelect" class="btn" value="▼" />
    <span class="mark" title="*">请选择</span>
</div>
<br />
<div class="select">选择值:<input type="text" id="txtChoose"  class="text" value="" /></div>
<style type="text/css">
    .select{ position:relative; margin:0 auto; width:400px; border:solid 1px #ccc;height:22px;}
    .select select{width:196px;height:18px;position:absolute; top:1px;left:50px;visibility:hidden; z-index:9999; }/*position:absolute; top:1px;left:50px;*/
    .select .text{width:170px; height:15px; position:absolute;top:1px;left:50px;}
    .select .btn{ width:17px; height:17px;position:absolute;top:2px;left:226px;text-align:center; padding:0px;}
    .select .mark{ margin-left:200px;LINE-HEIGHT: 22px;color:red;}
</style>
<script type="text/javascript">
    var eClick = function (e){
        e = window.event || e;
        var targetElem = e.srcElement || e.target;
        var selectElem = document.getElementById('drpName');
        var txttElem = document.getElementById('txtName');
        //如果是下拉按钮
         if ( targetElem.id == 'btnSelect' ){
            selectElem.style.visibility = 'visible'; // collapse visible hidden
            selectElem.focus();
            //展开select项(默认IE会提示！)
            //try{ var WshShell = new ActiveXObject("Wscript.Shell");WshShell.SendKeys("%{DOWN}");WshShell.Quit; } catch(e){ }
         }else if( targetElem.id == 'drpName' ) {
            
         }else{
            selectElem.style.visibility = 'hidden';
         }
    };
    addEvent(document,'click',eClick);
    
    function addEvent(target, eventType, func, parameter) {
        var efunc = function (e){ func (e, parameter); };
        if( target && target.attachEvent)
        {
            target.attachEvent("on" + eventType, efunc );
            
        }else if( target && target.addEventListener)
        {
            target.addEventListener(eventType, efunc, false);
            
        }
    }
    
    function eChoose(value)
    {
        document.getElementById('txtChoose').value = value;
        var selectElem = document.getElementById('drpName');
        selectElem.style.visibility = 'hidden';
        var txttElem = document.getElementById('txtName');
        txttElem.value  = value;
        if (value=='')
        {
            txttElem.disabled = false;
            txttElem.focus();
        }else
        {
            txttElem.disabled = true;
            document.getElementById('txtChoose').focus();
        }
    }
</script>

代码只是一个事件关联，select的显示和隐藏的控制，没什么好说，不过这里实现的效果还差矣！因为在点那个▼按纽只能显示select，却没办法展开select下拉列表项，所点了那个按纽还需要点开select一下再去选择，无语了，用户体验差！还有一个就是用IE专用的ActiveXObject可以控制展开select下拉列表项，不过好象默认提示Active运行的警报，而且隔段时间选的是又会提示，不好不好。话说回来，这个只是在IE6里面才有这样的问题，为什么不直接用层解决呢，把所有的select获取换成div层，即可设置为可输入或不可输入，好象Ext就有这样的控件了，这里留个记号，有时间也去写一个这样的服务器控件。

调整好样式后最终实现的效果如下：