Reply To: dependent dropdown select field

• John Huebner

• March 25, 2016 at 6:37 am

I know this is a fairly old topic, but I have been working on a project that has required me to create a select field that’s populated based on another select field and I did not want the user to need to save the post in the middle.

I’m only going to cover the JavaScript that needs to be added to ACF to get this to work and I’m not going to go into all of the WP PHP side of building an AJAX action, this can be found and there’s plenty of information on it already.

Basically, you create the first field as a select field and use documentation already available for dynamically loading the choices of the select field.

I’m going to be honest, I’m not 100$ certain of everything in this, some of it is simply copied from the ACF code.

  jQuery(document).ready(function($){
    if (typeof acf == 'undefined') { return; }
    
    // extend ACF and add our own functios
    var bluntParasrch = acf.ajax.extend({
      
      // add events that will trigger our function to be called
      events: {
        // 'trigger #field_id': 'function_name'
        // the field id = '#acf-{$field_key}
        // this is the field key of the field we want to use to 
        // get values for the second select field
        'change #acf-field_56e1cf2e7ad26': 'field_56e1cf2e7ad26_change',
        'ready #acf-field_56e1cf2e7ad26': 'field_56e1cf2e7ad26_change',
      },
      
      // add the function that will be triggered
      _para_tax_change: function(e){
      
        // bail early if no ajax
        if( !acf.get('ajax') ) return;
        // abort XHR if it's already running
        if( this.request ) {
          this.request.abort();
        }
        // vars
        var self = this,
            data = this.o;
        // add action url
        // the action is the action you will call and that you'd add using
        // add_action('wp_ajax_... or wp_ajax_nopriv_...
        // in this case the action would take the value we send it, a term ID
        // and get children of that term
        data.action = 'get_sub_terms';
        
        // this is the value of the select field of the parent term
        // to get chidren of, this value will be in $_POST['value']
        data.value = e.$el.val();
        
        // if no value then abort
        if (!data.value) {
          return;
        }
        
        data.exists = [];
        this.request = $.ajax({
          url:    acf.get('ajaxurl'),  // ajax url, acf already sets this
          data:    acf.prepare_for_ajax(data), // another included acf function
          type:    'post', // posted values, look at $_POST in your php ajax action function
          dataType:  'json', // how we want the date returned
          success: function( json ){
            // get the field we want to populate
            var $select = $('.acf-field-56e2b71dde0c5 select');
            // this stores the currenlty selected value in that field
            // so that we can mark it as selected, this is important when loading
            // and exsiting post
            var $selected = $select.val();
            // clear all of the exsiting options from the field
            $select.empty();
            // rebuild the child select field
            $select.append('<option data-i="" selected="selected" value="">- Select -</option>');
            var count = json.length;
            for (i=0; i<count; i++) {
              //alert(json[i]['value']+':'+json[i]['label']);
              //var $option = $select.createElement('option');
              //$option.value = json[i]['value'];
              //$option.text = json[i]['label'];
              var $item = '<option value="'+json[i]['value']+'"'
              if ($selected == json[i]['value']) {
                $item += ' selected="selected"';
              }
              $item += '>'+json[i]['label']+'</option>';
              $select.append($item);
            }
          }
        }); // end ajax
      },
    });
    
    // trigger the ready action to load the field
    // this is important for existing posts
    $('#acf-field_56e1cf2e7ad26').trigger('ready');
    
  });