output txt file with selectbox options in php_问答_开发者

I am trying to display two selectboxes in my php page ,where the user can select options from first selectbox to add it to second box and then click a button to generate a textfile with all the options in the second selectbox.

Can anyone please help? (IE 7 only please)

Here is the code that I tried till now.

<html>
<head>
<script language="JavaScript">
function moveSelectedOption() {
    // Fetch references to the <select> elements.
    var origin = document.getElementById('origin_select');
    var target = document.getElementById('target_select');

    // Fetch the selected option and clone it.
    var option = origin.options[origin.selectedIndex];
    //var copy = option.cloneNode(true);

    // Add the clone to the target element.
    //target.add(copy, null);

 target.options[target.options.length] = new Option(option.text, option.value);
}
</script>
</head>
<body>
<div style="position:absolute;top:10px;left:10px;">
<?php 
        // Make a MySQL Connection
        mysql_connect("localhost", "jpro", "pop") or die(mysql_error());
        mysql_select_db("db1") or die(mysql_error());
        $result = mysql_query("select t1 from results") or die(mysql_error());  
        ?>
        <select id="origin_select" style="height:400px;width:200px;" multiple>
        <?php
        while($row = mysql_fetch_array( $result )) {
        $t1 = $row['T1'];
        ?>
        <option value="<?php echo $t1; ?>"><?php echo $t1; ?></option> 
        <?php
        }
        ?>
    </select>
</div>
<script>
$("#开发者_运维知识库btn1").click (functio() {
var arr= new Array;
$("#target_select option").each (function () {
//arr.push( $(this).val() );
alert (this.val());
});
});
</script>
<div style="position:absolute;top:50px;left:220px;">
<button onclick="moveSelectedOption()">Add</button>
</div>
<div style="position:absolute;top:10px;left:300px;">
<select id="target_select" style="height:400px;width:200px;" multiple>
<option>&nbsp;</option>
</select></div>
<div style="position:absolute;top:50px;left:560px;">
<button id="btn1">Generate and Save .txt file</button>
</div>



</body>
</html>

Your problem seems quite vague, but here's some help for the HTML/JavaScript/Jquery part. It works for me (also uses the multiple select):

<html lang="en">
    <head>
        <!-- include jquery here !-->

        <script language="JavaScript">
        function moveSelectedOption() {
            // Walk through ALL selected options in origin list
            $("#origin_select option:selected").each(function() {
                // Clone option and add to target list
                $("#target_select").append($(this).clone());
            });
        }

        // Gets called on document load
        $(function() {
            $("#btn1").click (function() {
                var arr= new Array;
                var str = "";
                var str2 = "";
                $("#target_select option").each (function () {
                    // You can push the array on an array
                    arr.push( $(this).val() );
                    // or append it to a string
                    str = str + $(this).val() + "\n";
                    // or append it to a string with <BR>s as line-breaks
                    str2 = str2 + $(this).val() + "<BR>";
                });
                // Alert the string to the user
                alert(str);

                // now do something with either one of them...for example open 
                // a new window and generate list in there as html to copy-and-paste
                wn = window.open();
                wn.document.write("<HTML>"+str2+"</HTML>");
                wn.document.close();

            });
        });
        </script>
    </head>

    <body>
        <div style="position:absolute;top:10px;left:10px;">
                <select id="origin_select" style="height:400px;width:200px;" multiple>
                <!-- I don't use php so I just added some hard-coded options -->
                <option value="Just an option ID">Just an Option Value</option> 
                <option value="In your case ID and Value are the same">In your case ID and Value are the same</option> 
                <option value="Another One">Another One</option> 
            </select>
        </div>
        <script>
        </script>

        <div style="position:absolute;top:50px;left:220px;">
            <button onclick="moveSelectedOption()">Add</button>
        </div>

        <div style="position:absolute;top:10px;left:300px;">
            <select id="target_select" style="height:400px;width:200px;" multiple>
                <!-- do you want to start with an empty line? Add your option &nbsp here then ;) -->
            </select>
        </div>

        <div style="position:absolute;top:50px;left:560px;">
            <button id="btn1">Generate and Save .txt file</button>
        </div>
    </body>
</html>