在Wordpress

Question

我需要两个下降（城市和区域）。当我从第一个下拉列表中选择一个城市时，第二个下拉列表应填充该城市中的区域。我有一张桌子，其中存储了城市和区域。

我有这样的Wordpress页面：

<form name="form" method="post" action="">
    <label>City:</label>
    <select name="city" class="city">
        <option>Select City</option>
        [insert_php]
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "builderstoday.in";
        $conn = mysqli_connect( $servername, $username, $password, $dbname );
        $db_table = "aacblocks";
        $sql = "SELECT DISTINCT City FROM ".$db_table;
        $result = mysqli_query( $conn, $sql );

        if ( mysqli_num_rows($result) > 0 ) {
            while ( $row = mysqli_fetch_array( $result ) ){
                echo "<option value='" . $row['City'] . "'>" . $row['City'] . "</option>" ;
            }
        } 

        mysqli_close($conn);
        [/insert_php]
    </select>

    <label>Area: </label>
    <select name="area" class="area">
        <option>Select Area</option>
    </select>
</form>

我创建了一个在Wordpress中使用ajax的插件：

Ajax.php

<?php
/**
 * Plugin Name: Ajax Cities
 * Description: Allows to select cities according to the country
 * Version: 1.0.0
 * Author: Jayesh Borase
 * License: GPL2
 */

add_action( 'wp_enqueue_scripts', 'my_enqueue' );

function my_enqueue() {
    wp_enqueue_script( 'ajax-script', plugins_url( '/ajax.js', __FILE__ ), array( 'jquery' ) );
    wp_localize_script( 'ajax-script', 'ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}

function my_action() {
    $city = $_REQUEST['city'];
    $DB_NAME = $_REQUEST['DB_NAME'];
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "builderstoday.in";
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    $db_table = "aacblocks";
    $sql = "SELECT DISTINCT Area FROM " . $DB_NAME . "Where City=" . $city;
    $result = mysqli_query( $conn, $sql );

    if ( mysqli_num_rows( $result ) > 0 ) {
        while ( $row = mysqli_fetch_array( $result ) ) {
            echo "<option value='" . $row['Area'] . "'>" . $row['Area'] . "</option>" ;
        }
    }
}
add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action');
?>

和ajax.js文件：

( function( $ ) {
    $( document ).ready( function () {
        $( '.city' ).change( function () {   
            var City = $( this ).val();
            var DB_Table = "<?php echo $db_table ?>";

            $.ajax( {
                cache: false,
                type: "POST",
                url: ajax_object.ajax_url,
                data: {
                    action : 'my_action',
                    city : City,
                    DB_NAME : DB_Table, 
                },
                success: function ( areadata ) {
                    jQuery( '.area' ).html( areadata );
                } 
            } );
        } );
    } );
} )( jQuery );

请帮助我实现这一目标。主要的是这只适用于一种产品而且我有超过50种产品，即我必须为50多种产品重复相同的产品（表）。