0

单击按钮后，我想将选择标记（列表框）的选定项目移动到文本框中。我正在使用下面的代码

<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>

上面的代码在 google chrome 浏览器中可以正常工作，但是当我在 IE 中运行页面时它不起作用。谁能告诉我代码中的问题是什么，并请建议使用 javascript 或任何其他与 google 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() 函数，该函数将空列表框 (selected_list) 与原始列表框 (lb) 的内容一起加载。4) 当有人在搜索文本框中输入单词或字母时，调用 get_list() 函数，根据输入的单词过滤文件。5) 当在 selected_list 中选择了一个文件名并按下 >> 按钮时，将调用 copy() 函数并将文件名复制到 FILENAME 文本框中。

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

4

3 回答 3

1

试试这个：

function copy() {
    var sel = document.getElementById('lb');
    document.getElementById('FileName').value = sel.options[sel.selectedIndex].text;
}
于 2013-07-23T05:29:32.210 回答
0

代码工作正常（见IE 中的小提琴）

如果您从本地文件系统打开文件，IE 可能会询问您是否允许运行脚本。你应该点击"Allow Blocked Content"它才能工作

见下图 在此处输入图像描述

于 2013-07-23T05:33:02.673 回答
0

尝试使用jQuery (1.10.1)

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

http://jsfiddle.net/7Axu8/

更新 http://jsbin.com/onayow/1

于 2013-07-23T05:37:33.490 回答