populate 2nd listbox from 1st

Question

I am trying various codes to populate a 2nd listbox (#box2) but to no avail. My latest attempt is that the JS is not showing anything on change so there must be an error in my code, but I cannot see it. I would be grateful if someone could check my code and show me where I have gone wrong. Many thanks

<?php

<select name="box1[]" id="box1" size="7" multiple="multiple" />

<?php
$i = 0;

while ($row = mysql_fetch_array($result))
    {
?>
<option value="<?php echo $row["custref"]; ?>">
 <?php echo $row["custref"]; ?></option>
<?php
    $i++;
    }

?>
<select name="box2[]" id="box2" size="7" multiple="multiple" />

<script type="text/javascript">


    $('#box1').change(function()
    {

        var option = $(this).find('option:selected').val();

        $('#box2').val(option);

    });

    </script>

Answer 1

try this code it will append the selected option from Box1 to Box2

<script type="text/javascript">

    $('#box1').change(function()
    {
     $box1_value=$("#box1").val();
     $box1_text=$("#box1 option:selected").text();
     $("#box2").append('<option value="'+$box1_value+'">'+$box1_text+'</option>');
}
</script>

Answer 2

Find selected, clone, append:

$('#box1').change(function() {
  var option = $(this).find('option:selected').clone();
  $('#box2').append(option);
});