Home Forums General Issues dependent dropdown select field Reply To: dependent dropdown select field

  • 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.

        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 ) {
            // 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) {
            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
                // 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++) {
                  //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>';
            }); // end ajax
        // trigger the ready action to load the field
        // this is important for existing posts