how to dropdown option keep selected after page loads onchange

Question

how i can get dropdown option keep selected after loading a page with function onchange? currently i can just load the page according to selected value from my dropdown. and after loading page it's selected with first value be default.

<select id="extDropDown">
        <option>Select Extension</option>
        <option value="*">All</option>
        <option value="zip">ZIP</option>
        <option value="rar">RAR</option>
        <option value="php">PHP</option>
        <option value="html">HTML</option>
        <option value="htm">HTM</option>
        <option value="jpg">JPG</option>
        <option value="bmp">BMP</option>
        <option value="txt">TEXT</option>
        <option value="docs">DOCS</option>
        <option value="xlsx">XLSX</option>
        <option value="xls">XLS</option>
    </select>


$( document ).ready(function() {
    $( '#extDropDown' ).bind( 'change', function( e ){
    document.location.href = "?dir=<?php echo $dir; ?>&action=loadfiles&ftype=" + $( this ).val();
  });
}); 

Answer 1

Since you are using JQuery, you can do this

$( document ).ready(function() {
  // pre-select the existing choice (if any)
  $( '#extDropDown' ).val( '<?php echo $ftype; ?>');

  // now register further changes to the dropdown option
  $( '#extDropDown' ).bind( 'change', function( e ){
    document.location.href = "?dir=<?php echo $dir; ?>&action=loadfiles&ftype=" + $( this ).val();
  });
}); 

Update Fixed typo