0

ボタンをクリックした後、selectタグ(リストボックス)の選択項目をテキストボックスに移動したい。私は以下のコードを使用しています

<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 でページを実行すると動作しません。誰かがコードの問題を教えてくれませんか。そして、Google Chrome と IE の両方で互換性のある JavaScript またはその他のコードを親切に提案してください。

上記のコードは、表示されるポップアップを許可すると機能しますが、実際には以下のコードは機能しません。

<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では機能しませんが、Google chromeでは機能します。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 に答える