在wordpress插件中使用Jquery

我有一个插件，该插件包含用于从DB插入/获取数据的功能。我的问题是我如何使用jquery或在wordpress插件内链接任何其他JS。我搜索并找到了很多文章，但不清楚，请在我的插件中添加jquery文件的步骤。我尝试过的一些步骤在我的页面顶部添加此行。

这是我的插件代码

<?php
/*
Plugin Name: myplugin
Description: form
Version: 4.0
Author: hercal
License: GPL
*/
?>
<?php 
function  form_creation()
{
global $wpdb;
function my_scripts_method()
{
wp_enqueue_script('fn',plugins_url('/myplugin/fn.js' , __FILE__ ),
    array( 'jquery' )
  );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
<form action=" <?php get_permalink(); ?> " method="post" id="myform">
<table>


<tr>
<td><input type="text" id="txtname" name="txtname" placeholder="Your Name"/> </td>
</tr>


<tr>
<td>
<!-- drop down menu  (Country )-->
<select id='select_Country' name="select_Country" >
        <option selected="selected" disabled="disabled"> -- Select Country -- </option>
        <?php
        $query='select Code,Country from _country order by Country';
        $result = $wpdb->get_results($query);
        foreach( $result as $row ) 
        {
           echo '<option value='.$row->Code.'>'.$row->Country.'</option>';
        }
        ?>
</select> 

</td>
</tr>


<tr>
<td>
<!-- drop down menu  (City )-->
<select id="select_city" name="select_city">
    <option selected="selected"> -- Select City -- </option>
</select>
</td>
</tr>


<tr>
<td> <input type="submit" id="btnsubmit" value="Submit" name='submit'/> </td>
</tr>

</table>
</form>
<?php } ?>
<?php
if($_POST['submit'])
{
    $name=strip_tags($_POST['txtname']);
    $country=$_POST['select_Country'];
    $city=$_POST['select_city'];
    $insertQuery="insert into _customers(Name,Country,City)values('$name','$country','$city')";
    $wpdb->query($insertQuery);
}
?>
<?php add_shortcode('test',form_creation); ?>

下面是fn.js，它位于C：\ wamp \ www \ test \ wp-content \ plugins \ myplugin \ fn.js中

<script type="text/javascript">
$(document).ready(function(){
    <!-- ajax method to bind the dropdown menu of model-->
        $("#select_brand").change(function(){
        var id=$(this).val();
        var dataString = 'id='+ id;
        $.ajax({
        type: "POST",
        url: "model.php",
        data: dataString,
        cache: false,
        success: function(data)
        {
            $("#select_Model").html(data);
        } 
        });
        });

    <!-- ajax method to bind the dropdown menu of city-->   
        $("#select_Country").change(function(){
        var id=$(this).val();
        var dataString = 'id='+ id;
        $.ajax({
        type: "POST",
        url: "city.php",
        data: dataString,
        cache: false,
        success: function(data)
        {
            alert("yes");
            $("#select_city").html(data);
        } 
        });
        });
        });
</script>

最后是city.php的代码

<?php
    if($_POST['id'])
    {
        global $wpdb;
        $id=$_POST['id'];
        $query="select id,CountryCode,City from _city where CountryCode='$id'";
        $result=$wpdb->get_results($query);
        echo '<option selected="selected" disabled="disabled"> -- Select City -- </option>';
        foreach ($result as $row)
        {
            $id=$row->id;
            $city=$row->city;
            echo '<option value="'.$id.'">'.$city.'</option>';
        }
    }
?>

问题是城市下拉列表无法获取价值。