请问如何在只读状态时显示select控件的当前值,不显示下拉框;而在编辑状态时显示下拉框和全部item?

现有一个table,初始状态为只读,用户通过点击按钮将选中行变为编辑状态.其中有一列使用select控件.用户希望在只读状态时只显示值,不显示下拉框;编辑状态时下拉框才变为可用.问题在于select控件是disable时,下拉框依然可见.请问各位大侠应该怎么做?是否通过切换两个控件来实现?

解决方案 »

  1.   

    可以利用剪裁:
    <select id='select' style="position:absolute;width:150px;top:100px;left:100px;clip: rect(0 100 110 auto)" >
    <option value='1'> 1 </option>
    <option value='2'> 2 </option>
    <option value='3'> 3 </option>
    <option value='4'> 4 </option>
    </select>
    但是这样必须将 position 属性的值设为 absolute.
    否则的话就只能用两个来切换了
      

  2.   

    拿个变量保存这个select
    再removechild..点编辑再添加
      

  3.   

    <html>
    <head>
    <script language=javascript>
    var ddl;
    function aaa()
    {
    ddl=document.getElementById("select");
    document.body.removeChild(document.getElementById("select"));
    }function bbb()
    {
    document.body.appendChild(ddl);
    }</script>
    </head>
    <body>
    <select id='select'>
    <option value='1'> 1 </option>
    <option value='2'> 2 </option>
    <option value='3'> 3 </option>
    <option value='4'> 4 </option>
    </select>
    <div id="div1" onclick="aaa();">remove</div>
    <div id="div1" onclick="bbb();">add Control</div>
    </body>
    </html>
      

  4.   

    先拿个object数组保存table里的所有select
    点击当前行的编辑,就取出当前行的object[rowIndex]
    大概意思就是这样.