a problem in jquery for select list

a problem in jquery for select list

here's my html:

----------------------------------------------------------------
       < html lang = "en" >
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>M3</ title>
< script type= "text/javascript">
function listChange( selectObj) {
var type = "1";
$( "select[name = 'f04']"). parent(). parent(). find( "select[name='f05'] option"). each( function () {
if ( $( this). text(). indexOf( type + ':') >= 0) {
$( this). show();
}
else {
$( this). hide();
}
;
});
}

</ script>
</ head>
< body>
< table class= "table table-light">
< thead class= "thead-light">
< tr>
< th>country</ th>
< th>city</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td>
< select name= "f04" id= "f04_0001" autocomplete= "off" onchange= " ">
< option value= "" selected= "selected"></ option>
< option value= "1" >Iran</ option>
< option value= "2" >Afghanestan</ option>
</ select>
</ td>
< td>
< select name= "f05" id= "f05_0001" autocomplete= "off" >
< option value= "" selected= "selected"></ option>
< option value= "1" >1:Tehran</ option>
< option value= "2" >1:Shiraz</ option>
< option value= "3" >2:Kabol</ option>
< option value= "4" >2:Harat</ option>
</ select>
</ td>
</ tr>
</ tbody>
< tfoot>
< tr>
< th>-----------------myTable-----------------</ th>
</ tr>
</ tfoot>
</ table>
</ body>
</ html>
-------------------------------------------

i want a casecade list for country list and city list. But it doesn't work.Can any help me!