Question

我想在wordpress中创建州/城市相关的下拉列表。这是我的js文件代码

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#state').change(function(){

var $location = $(this).val();
alert($location);
$.ajax({
url:'ajaxurl',
type: 'post',
data: ({action : 'getcity'}),
success: function() {

$("#district").removeAttr("disabled");
$("#district").append(results);
}
});
});
});
</script>

我在function.php中创建了一个名为getcity的函数，并为该函数添加了钩子和动作，并将此js文件添加到theme js文件夹中，并将其添加到函数文件中。我得到空警报？有人有任何想法??

add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php')."getcity"; ?>';
</script>

这是下拉代码

<p class="half_form half_form_last">
                <label for="property_country"><?php _e('State ','wpestate'); ?></label>
                <select name="state"  id="state"  class="select-submit2">
          <option  value="">Select state</option>
                <?php 
                $result=$wpdb->get_results("select distinct(state) from tblcitylist");
                //$wpdb->get_results($query);
                foreach($result as $row) {
$state=$row->state;
echo '<option value="">'.$state.'</option>';
}

          ?>      
            </select>    

            </p>

在function.php中

function getcity(){
    global $wpdb;
    if($_POST['state'])
            {
                $id=$_POST['state'];

                $result=$wpdb->get_results("SELECT * FROM tblcitylist WHERE  
 state='$id'");
                //$wpdb->get_results($query);
                              foreach($result as $row) {
                                                             $city_name   = $row- 
>city_name;
                             $city_id     = $row->city_id;

                            echo '<option  
  value="'.$city_id.'">'.$city_name.'</option>';
                //echo '<option value="'.'0'.'">'.'New Phase'.'</option>';

            }
 }
}
add_action("wp_ajax_nopriv_getcity", "getcity");
add_action("wp_ajax_getcity", "getcity");

我在functions.php

中包含了如下js文件

wp_enqueue_script('my_own_js', 
get_template_directory_uri().'/js/my_own_js.js',array('jquery'));

Answer 1

我认为将其作为答案发布会更好。我从functions.php中删除var ajaxurl并在页面内使用它。然后，我不知道您将位置传递到ajax的位置。它应该是这样的：

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#state').on('change', function() {

      var location = this.value;
      alert(location);

      $.ajax({
        type: "POST",
        url:'<?php echo admin_url('admin-ajax.php'); ?>',
        data: ({'action' : 'getcity', 'location' : location }),
        success: function(results) {
          $("#district").removeAttr("disabled");
          $("#district").append(results);
        }
      });
    });
  });
</script>

然后Dropdown应该是这样的

<select id="state">
  <option value="state1">state1</option>
  <option value="state2">state2</option>
  ...
</select>

对于getcity，你必须得到正确的$_POST：

function getcity(){
global $wpdb;
  if($_POST['location']){
    $id=$_POST['location'];
    $result=$wpdb->get_results("SELECT * FROM tblcitylist WHERE state='$id'");
    $html = '';
    foreach($result as $row) {
      $city_name = $row->city_name;
      $city_id   = $row->city_id;
      $html .= '<option value="'.$city_id.'">'.$city_name.'</option>';
    }
  }
}
add_action("wp_ajax_nopriv_getcity", "getcity");
add_action("wp_ajax_getcity", "getcity");

wordpress主题文件中的依赖下拉列表

1 个答案: