选择值不会使用jQuery和Ajax进行更改

Question

我的表单中有两个Dropdown City和Zipcode。当用户选择Zipcode时，我想将City Dropdown更改为相应的City w.r.t Zipcode。我正在尝试使用Ajax来实现这一目标。

jQuery代码：

$(document).on('change','#zip_id', function(e){
e.preventDefault(); 
var zipID = jQuery(this).val();
if(zipID){
jQuery.ajax({
    url: ajaxschoolajax.ajaxurl,
    data: {'zip_id': zipID, 'action':'cityOptions_Process'},
    type: 'POST',
    success: function(data){
        jQuery('#temp').html(data); 
},

error: function (exception) {
    console.log("Error");
            console.log(exception);
        }
});

PHP函数

    function cityOptions_Process() {
    if(isset($_POST["zip_id"]) && !empty($_POST["zip_id"])){
        $selectedZip = $_POST["zip_id"];
        global $wpdb;

        $sql = "SELECT `city_id` FROM `wp_gj73yj2g8h_hills_zipcodes` WHERE zip_id = '$selectedZip'";
        $data = $wpdb->get_row($sql);
        $output = $data->city_id;
        echo $output;
        die();
}
}

add_action( 'wp_ajax_nopriv_cityOptions_Process', 'cityOptions_Process' );
add_action( 'wp_ajax_cityOptions_Process', 'cityOptions_Process' );

Ajax错误函数中显示的不正确的responseText Ajax数据

Answer 1

首先检查城市的值可能是您的查询未返回有效值。之后，您只需使用此代码即可设置下拉值。

 $('#city_id').val(city);

同时从数据中删除单引号

 data: {zip_id: zipID, action:'cityOptions_Process'},

Answer 2

不要回显$ cityId，将其归还。

function cityOptions_Process() {
if(isset($_POST["zip_id"]) && !empty($_POST["zip_id"])){
    $selectedZip = $_POST["zip_id"];
    global $wpdb;
    $cityId = $wpdb->get_results($wpdb_prepare("select city_id from `wp_gj73yj2g8h_hills_zipcodes` WHERE zip_id=%d",$selectedZip));
    return $cityId;

}
}

同时删除select

中的$("#city_id select").val('city');