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

dependent dropdown in wordpress theme files

本文关键字：依赖下拉列表文件 wordpress 更新时间：2023-09-26

我想在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文件添加到主题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'));

我觉得最好把它作为一个答案贴出来。我会从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>

那么下拉菜单应该是这样的

<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");