Code execution does not happen interchangeably between server and client. The client initiates a request to the server, which sends some output, which may then result in furhter processing by the browser. The server will do nothing until the browser requests a new resource.
Your php file is executed first
<select name='trade' onchange="document.getElementById('extra').innerHTML = this.value;">
<option value='item1'>item1</option>
<option value='item2'>item2</option>
<option value='item3'>item3</option>
<option value='item4'>item4</option>
</select>
<?php
$extra = '<div id="extra"></div>';
echo $extra
?>
That file sends this output to the browser
<select name='trade' onchange="document.getElementById('extra').innerHTML = this.value;">
<option value='item1'>item1</option>
<option value='item2'>item2</option>
<option value='item3'>item3</option>
<option value='item4'>item4</option>
</select>
<div id="extra"></div>
The browser will render the that html code as a select box. The div element won't even show since it has no border, different background color, is of 0 size and contains nothing inside it.
Now, enter the user. The user selects a value in the select box, say "item2", and the onchange event handler is executed, resulting in a replacement of whatever is found in your div element (an empty string so far) with the newly selected value, which would directly be shown on screen, since the browser recalculates how to display things after this change.
The server is still not involved at all and does not know anything about the user action or results of the javascript execution. You have in fact, saved nothing in your $extra php variable.
To further clarify, the code you posted produce the exact same result as this code does, which doesn't even include a $extra variable (since the only thing ever saved to this variable is the string '<div id="extra"></div>'.
<select name='trade' onchange="document.getElementById('extra').innerHTML = this.value;">
<option value='item1'>item1</option>
<option value='item2'>item2</option>
<option value='item3'>item3</option>
<option value='item4'>item4</option>
</select>
<?php
echo '<div id="extra"></div>';
However, if you put your select element as a descendant of a form element, and target the action at some php script, you can by accessing either $GET or $POST (depending on form method used) assign this value to any variable you like. Also note that this is possible without putting the value in a div element (which incidentally also never ever is sent to the server. Only input, textarea and select elements inside a form element will ever be sent to the server (at least without using javascript and XmlHttpRequest to build your own requests).