Question

我希望在单击按钮后将选定标签（列表框）的选定项目移动到文本框中。我使用以下代码

<html>
    <head>
        <script type="text/javascript">
            function copy()
            {
                var sel = document.getElementById('lb').value;
                document.getElementById('FileName').value = sel;
            }
        </script>
    </head>
    <body>
        <form name="frm1" id="frm1">
            <select id="lb" name="lb" size="5">
                    <option value="abc.txt">abc.txt</option>
                    <option value="def.txt">def.txt</option>
            </select>

            <input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">

            <input type="text" name="FileName" id="FileName">
        </form>
    </body>
</html>

以上代码在谷歌浏览器浏览器中正常工作，但是当我在IE中运行页面时，它不起作用。任何人都可以告诉我代码中的问题，并建议一个javascript或任何其他兼容谷歌chrome和IE的代码。

上面的代码工作后，我允许弹出来，但实际上下面的代码不起作用。

<html>
    <head>
        <title>FILE</title>
        <style>
            body{background-color:#b0c4de;}
            #OutBound{text-align:center;}
            #btn_sbmt{position:absolute;top:150px;left:700px;}
            #div_text_label{position:absolute;top:50px;left:200px;}
            #lbl2{position:absolute;top:80px;left:200px;}
            #selected_list{position:absolute;width:300px;top:80px;left:335px;}
            #btn_move{position:absolute;top:100px;left:650px;}
            #FileName{position:absolute;width:300px;top:100px;left:700px;}
        </style>
        <script type="text/javascript">
            function load_list()
            {
                document.getElementById('div_main_select').style.display="none";
                var textbox = document.getElementById('pattern');
                var listbox = document.getElementById('selected_list');
                var mainListbox = document.getElementById('lb');
                listbox.innerHTML = '';
                for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
                {
                    var child = mainListbox.children[childIndex];
                    option = document.createElement('option');
                    option.innerHTML = child.innerHTML;
                    listbox.appendChild(option);
                }
                alert (load_list_1);
            }
            function get_list()
            {
                var textbox = document.getElementById('pattern');
                var listbox = document.getElementById('selected_list');
                var mainListbox = document.getElementById('lb');
                listbox.innerHTML = '';
                for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
                {
                    var child = mainListbox.children[childIndex];
                    if (child.innerHTML.search(textbox.value) != -1)
                    {
                        option = document.createElement('option');
                        option.innerHTML = child.innerHTML;
                        listbox.appendChild(option);
                    }
                }
                alert (get_list_1);
            }
            function copy()
            {
                var sel = document.getElementById('selected_list').value;
                document.getElementById('FileName').value = sel;
                alert (copy_1);
            }
        </script>
    </head>
    <body style="color: black; background-color: rgb(255, 255, 255); background-image: url(background-1204x927.jpg);" BGCOLOR="#ffffff" text="black" link="#B03060" vlink="#B03060" onload="load_list()">
        <hr>
        <form id="OutBound" name="OutBound" action="" method="GET">
            <div style="text-align:center;" id="div_text_label" name="div_text_label">
                <label id="lbl1" name="lbl1">search :</label>
                <input type="text" name="pattern" id="pattern" onKeyUp="get_list()">
            </div>
            <div style="text-align:center;" id="div_main_select" name="div_main_select">
                <select id="lb" name="lb" size="5">
                    <option value="abc.txt">abc.txt</option>
                    <option value="def.txt">def.txt</option>
                </select>
            </div>
            <label id="lbl2" name="lbl2">File List:</label>
            <select id="selected_list" name="selected_list" size="5">
            </select><br>
            <input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
            <input type="text" name="FileName" id="FileName">
            <input type="submit" name="btn_sbmt" id="btn_sbmt" value="MOVE FILES">
        </form>
    </body>
</html>

页面的工作原理如下.. 1）有一个填充了一些项目的列表框（lb）。 2）还有1个空列表框（selected_list）。 3）当加载页面表单时，调用load_list（）函数，该函数使用原始列表框（lb）的内容加载空列表框（selected_list）。 4）当有人在搜索文本框中输入单词或字母时，将调用get_list（）函数，该函数根据输入的单词过滤文件。 5）当在selected_list中选择文件名并且＆gt;＆gt;按下按钮，调用copy（）函数并将文件名复制到FILENAME文本框。

但这一切都不适用于IE，但它适用于谷歌浏览器。任何人都可以修复代码，以便它也适用于IE。

Answer 1

试试这个：

function copy() {
    var sel = document.getElementById('lb');
    document.getElementById('FileName').value = sel.options[sel.selectedIndex].text;
}

Answer 2

代码工作正常（请参阅IE中的fiddle）

如果从本地文件系统打开文件，IE可能会请求您的许可来运行脚本。您应该点击"Allow Blocked Content"才能使用

见下图 enter image description here

Answer 3

使用jQuery（1.10.1）

尝试此操作

  function copy()
        {
            $("#FileName").val($("#lb").val());
        }

http://jsfiddle.net/7Axu8/

<强>更新 http://jsbin.com/onayow/1

如何将列表框中的选定项目移动到文本框中？

3 个答案: