php，mysql和javascript

I want to do dynamic select option like when selected dropdown option of first column in database immediately I want to display data of second column from mysql database in input field.

<select name="name" class="form-control" autoFocus="" id="clients" onchange="myFunction()">
    <option value="">Select Client</option>
    <?php 
        $query = mysql_query("SELECT * FROM clients");
        while($selectclients = mysql_fetch_array($query)){  
   ?>
    <option id="<?php echo $selectclients['client_id']; ?>" value="<?php echo $selectclients['data1'] ?>" onchange="show(this.value);"></option>
   <?php } ?>   
</select>

<span name="data2" type="text" id="data2"></span>
<script>
function myFunction() {
    var x = document.getElementById("clients").value;
    document.getElementById("list_currency").innerHTML = "<input name='currency' type=text id='currency' size='12' value="+ x +">";
}
</script>

In the script i have used m able to fetch the data and display in dropdown option and when select (first column in database) whatever m selecting in select option m able to display in input field but i m not able to display data from second column of database

I kindly request to help me in this issue

<?php 
    $query = mysql_query( 'select * from `clients`;' );

    echo "
    <select name='name' class='form-control' autoFocus='' id='clients' onchange='myFunction()'>
        <optgroup label='Select Client'>";
        while( $rs = mysql_fetch_array( $query ) ){  
            echo "<option id='{$rs['client_id']}' value='{$rs['data1']}'>{$rs['data1']}</option>";
        }
    echo "  
        </optgroup>
    </select>";
?>


/* span elements do not have a 'type' attribute */
<span name='data2' id='data2'></span>
/* Your original code did not show the receiving html element, list_currency */
<span name='list_currency' id='list_currency'></span>


<script type='text/javascript'>
    function myFunction() {
        var oSelect = document.getElementById('clients');
        var oCur=document.getElementById('list_currency');
        var value=oSelect.options[ oSelect.options.selectedIndex ].value;

        oCur.innerHTML = "<input name='currency' type='text' id='currency' size='12' value=" + value + ">";
    }
</script>

I'm not 100% sure I understood the question as there is mention of data from a second column but no reference to it in the code. That said, based on the original when you select an option from the dropdown menu the container element list_currency will be populated with the input field with the value of the select menu. If this is NOT what you meant then please explain further - especially what the second column is...

the above post of code is working good as per my requirement after small modification

<?php 
    $query = mysql_query( 'select * from `clients`;' );

    echo "
    <select name='name' class='form-control' autoFocus='' id='clients' onchange='myFunction()'>
        <optgroup label='Select Client'>";
        while( $rs = mysql_fetch_array( $query ) ){  
            echo "<option id='{$rs['client_id']}' value='{$rs['currency']}'>{$rs['name']}</option>";
        }
    echo "  
        </optgroup>
    </select>";
?>



<span name='list_currency' id='list_currency'></span>


<script type='text/javascript'>
    function myFunction() {
        var oSelect = document.getElementById('clients');
        var oCur=document.getElementById('list_currency');
        var value=oSelect.options[ oSelect.options.selectedIndex ].value;

        oCur.innerHTML = "<input name='currency' type='text' id='currency' size='12' value=" + value + ">";
    }
</script>

I thanks a lot for posting this code thank you soo much

</div>