双击select的一个option变成可编辑的文本框

双击select的一个option变成可编辑的文本框，onblur事件还原成option，并保存内容。JS应该如何写？各位大虾帮忙~下面是jsp中的内容：
<select id="u34" size="15" class="u34" multiple="multiple" style="width:100%"  >
 <option value="test1">test1</option>
 <option value="test2">test2</option>
 <option value="test3">test3</option>
</select>

解决方案 »

  1.   

    与其变+还原 不如后面跟一个隐藏的text 。
      

  2.   

    select是不能编辑的，这样的功能你需要使用div进行模仿或者找个现成的
    http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml
      

  3.   

    只能用select啊，需求上面也是这么要求的、
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
    var opts = document.getElementById('u34').getElementsByTagName('option');
    var idx;  //注册一个全局变量用来保存当前双击的option的索引号
    for (var i = 0; i < opts.length; i ++) {
    opts[i].ondblclick = function() {
    //alert(this.index);
    idx = this.index;
    var txt = this.innerHTML;
    this.parentNode.style.display = 'none';
    var t34 = document.getElementById('t34');
    t34.value = txt;
    t34.style.display = '';
    }
    }
    document.getElementById('t34').onblur = function() {
    var u34 = document.getElementById('u34');
    u34.options[idx].innerHTML = this.value;
    this.style.display = 'none';
    u34.style.display = '';
    }
    }
    </script>
    </head><body>
    <select id="u34" size="15" class="u34" multiple="multiple" style="width:100%">
     <option value="test1">test1</option>
     <option value="test2">test2</option>
     <option value="test3">test3</option>
    </select><input type="text" id="t34" style="display:none;" />
    </body>
    </html>
      

  5.   

    上面那个不兼容IE，稍微修改了一下，别忘了结贴，谢谢。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
    var idx;  //注册一个全局变量用来保存当前双击的option的索引号
    document.getElementById('u34').ondblclick = function() {
    idx = this.selectedIndex;
    txt = this.options[idx].innerHTML;
    this.style.display = 'none';
    var t34 = document.getElementById('t34');
    t34.value = txt;
    t34.style.display = '';
    }
    document.getElementById('t34').onblur = function() {
    var u34 = document.getElementById('u34');
    u34.options[idx].innerHTML = this.value;
    this.style.display = 'none';
    u34.style.display = '';
    }
    }
    </script>
    </head><body>
    <select id="u34" size="15" class="u34" multiple="multiple" style="width:100%">
     <option value="test1">test1</option>
     <option value="test2">test2</option>
     <option value="test3">test3</option>
    </select><input type="text" id="t34" style="display:none;" />
    </body>
    </html>