php - Dynamic Select Dropdown Wordpress By advanced custom field

17

This is my code for Multiple Dropdown.

I have two dropdown, One for City and other for Area.

So when someone select a city, then Area dropdown should automatically populate.

THis is the url

http://ctclick.com/category/

<? 

 $field_key = "field_570e68df39304"; 
 $field = get_field_object($field_key);


 if( $field == 'pune' )

  { 
    $field_key = "field_570e68df39304"; 
    $field = get_field_object($field_key);
      if( $field )
        {  
          echo '<select name="city" id="city">';    
          foreach( $field['choices'] as $k => $v )    
            {
              echo '<option value="' . $k . '">' . $v . '</option>';    
            }  
              echo '</select>';
        }
  }

elseif ( $field == 'akola' )
  {
    $field_key = "field_570e691b39305"; 
    $field = get_field_object($field_key);
    if( $field )
      {  
        echo '<select name="city" id="city">';    
          foreach( $field['choices'] as $k => $v )    
            {      
              echo '<option value="' . $k . '">' . $v . '</option>';    
            }  
              echo '</select>';
      }  
  }
else
{
  ?>
  <select >
  <option>Select Area</option>
  </select>
  <?
}

 ?>
525

Answer

Solution:

In this case you will probably have to use some ajax in your code so that when you change the value of the first drop down menu, it triggers an ajax call. To achieve this you would have to include some javascript like this

$('#city_dropdown').change(function() {
    jQuery.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: 'POST',
        data: {
            action: 'get_city_areas',
            city_id: $(this).val(),            
        },
        dataType: 'html',
        success: function (result) {
            $('#area-dropdown').html(result)
        },
        error: function (errorThrown) {
            console.log(errorThrown);
        }
    })
});

What is happening there is that when your city drop down is changed, it triggers an Ajax request to get all related areas. Ajax in Wordpress is done through the admin-ajax system. You can read more on that here: https://codex.wordpress.org/AJAX_in_Plugins

In your functions.php file you could add the following to register an Ajax call to retrieve the city areas

add_action('wp_ajax_get_city_areas', 'handle_get_city_areas');
add_action('wp_ajax_nopriv_get_city_areas', 'handle_get_city_areas');
/**
 * Handle the list of areas
 */
function handle_get_city_areas(){
    $city_id = $_POST['city_id'];
    //Using the city ID, retrieve the related areas
    //and then echo the new select menu
}

That should help you get what you are looking for.

People are also looking for solutions to the problem: php - when echoing information about a mysql table as a link, and sending information with the link to be retrieved in another page using $_GET not working

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.