I am trying to load a select option depending on the value selected on another select option

<select id="state" onchange="SelectValue();">
    <option value="State1">State1</option>
    <option value="State2">State2</option>
    <option value="State3">State3</option>
<select id="district"></select>

<script type="text/javascript">
        function SelectValue()
            var e = document.getElementById("mfr");
            var Val = e.options[e.selectedIndex].value;


I want to call this function GetDistrict(Val) from javascript function SelectValue and display the result in select box with id district.

function GetDistrict($stateID)
    $query="select * from tabledistrict where stateId="+$stateId;
    ...............//here i am fetching the district names in this function

Any help will be greatly appreciated.
I have been browsing the net for this, and i have come across using ajax. As i am new to ajax, i want to know if this can be done with plain javascript??