Gravity Forms Drop-Down Dynamisches Popup-Problem

Question

Ich habe eine Gravitationsform, in der ich dynamisch ein Dropdown-Feld und ein zweites Feld mit der Anzahl der Elemente in diesem Dropdown-Popup bevölke.

Wenn die Anzahl der Elemente> 1 ist, verwende ich die ausgewählte Elementinfo, um einige zusätzliche Informationen zu erhalten und sie zu verwenden, um ein zweites Dropdown zu füllen. Das funktioniert gut. Hier ist der relevante Abschnitt des Codes:

// When a choice from the dropdown "Which League (F32)" is selected, 
// populate "League ID (F57)", 
// populate "League Name (F64)" and 
// populate dropdown "Player Two (F13)" 
jQuery("#input_5_32").on('change',function(){ 
    var myval = jQuery(this).val(); 

    jQuery("#input_5_57").val(myval); 
    jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text()); 

    jQuery.ajax({ 
     type: 'post', 
     dataType:'JSON', 
     url : bb_ajax_url, 
     data : { league_id: myval, action:'get_player_two_names' }, 
     success : function(data) { 
      jQuery('#input_5_13').html(''); 
      jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>')); 
      jQuery.each(data , function(k,p){ 
       jQuery('#input_5_13').append(jQuery('<option value="'+p.v+'">'+p.t+'</option>')); 
      }); 

     }, 
    }); 
}); 

Die meiste Zeit jedoch gibt es nur ein Element in der ersten Dropdown-Liste in diesem Fall, ich brauche den Benutzer nicht, sie zu öffnen und klicken Sie auf Item, um eine Auswahl zu treffen, ich weiß bereits, was es sein wird. Ich möchte die Info verwenden und die gleiche Routine auslösen, die das zweite Dropdown dynamisch füllt, damit ich das 1. Dropdown ausblenden kann und den Benutzer ein wenig Zeit und Irritation sparen kann.

Das Arbeitsmodul wird basierend auf einer Änderung der 1. Dropdown-Liste ausgelöst. Kann ich dieses Verhalten auf andere Weise auslösen oder die Auswahl aus Drop-down # 1 fälschen?

Ich habe meinen Plugin-Konflikt aus dem Weg geschafft, also habe ich noch einmal versucht, @ Wouter Bouwmans Antwort zu implementieren, obwohl ich wahrscheinlich irgendwo einen Fehler mache. Hier ist, was ich getan habe:

//Check whether the amount of options is only one 
if (jQuery('#input_5_32').length === 1) { 
    jQuery('#input_5_32').change(); //Trigger the change event 
    console.log("Yes, Routine to not need 'Which League' has been executed"); 
    var myval = jQuery(this).val(); 
    console.log(myval); 
    jQuery("#input_5_57").val(myval); 
    jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text()); 

    jQuery.ajax({ 
     type: 'post', 
     dataType:'JSON', 
     url : bb_ajax_url, 
     data : { league_id: myval, action:'get_player_two_names' }, 
     success : function(data) { 
      jQuery('#input_5_13').html(''); 
      jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>')); 
      jQuery.each(data , function(k,p){ 
       jQuery('#input_5_13').append(jQuery('<option value="'+p.v+'">'+p.t+'</option>')); 
      }); 

     } 
    }); 
} 

die # input_5_32 nicht mit irgendetwas gefüllt zu werden, und die # input_5_64 wird immer gefüllt mit „Wählen Sie die Liga für dieses Spiel“ anstelle des Liganame. Das Dropdown-Menü # input_5_13 sagt immer noch "Select Player Two".

Ich muss den Vorschlag falsch implementieren, aber brauche ein wenig Hilfe hier.

Answer 1

Ich habe ein kleines Beispiel für die Aktivierung von onChange zusammengestellt, wenn es nur eine Option im Dropdown-Menü gibt. Es zeigt Ihnen auch, was passiert, wenn es zwei Optionen gibt.

Praktisch bedeutet dies, dass Sie nur die folgenden zu Ihrem jQuery hinzufügen müssen.

if (jQuery('#input_5_32').length === 1) { //Check wether the amount of options is only one 
    jQuery('#input_5_32').change(); //Trigger the change event 
} 

$('#select').change(function(e) { 
 
    $('#select2').show(); 
 
}); 
 

 
if ($('#select option').length === 1) { 
 
    $('#select').change(); 
 
} 
 

 
$('#select3').change(function(e) { 
 
    $('#select4').show(); 
 
}); 
 

 
if ($('#select3 option').length === 1) { 
 
    $('#select3').change(); 
 
}

<div> 
 
<select id='select'> 
 
    <option val='1'>Only option</option> 
 
</select> 
 

 
<select id='select2' hidden> 
 
    <option val='1'>Opt1</option> 
 
    <option val='2'>Opt2</option> 
 
    <option val='3'>Opt3</option> 
 
    <option val='4'>Opt4</option> 
 
    <option val='5'>Opt5</option> 
 
    <option val='6'>Opt6</option> 
 
</select> 
 
</div> 
 

 
<div> 
 
<select id='select3'> 
 
    <option val='1'>First option</option> 
 
    <option val='1'>Second option</option> 
 
</select> 
 

 
<select id='select4' hidden> 
 
    <option val='1'>Opt1</option> 
 
    <option val='2'>Opt2</option> 
 
    <option val='3'>Opt3</option> 
 
    <option val='4'>Opt4</option> 
 
    <option val='5'>Opt5</option> 
 
    <option val='6'>Opt6</option> 
 
</select> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

UPDATE: Ich habe Ihren Code ein wenig bearbeitet. Der Unterschied besteht darin, dass der Check außerhalb des onChange-Ereignisses platziert werden muss.

jQuery("#input_5_32").on('change', function() { 
    var myval = jQuery(this).val(); 

    jQuery("#input_5_57").val(myval); 
    jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text()); 

    jQuery.ajax({ 
    type: 'post', 
    dataType: 'JSON', 
    url: bb_ajax_url, 
    data: { 
     league_id: myval, 
     action: 'get_player_two_names' 
    }, 
    success: function(data) { 
     jQuery('#input_5_13').html(''); 
     jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>')); 
     jQuery.each(data, function(k, p) { 
     jQuery('#input_5_13').append(jQuery('<option value="' + p.v + '">' + p.t + '</option>')); 
     }); 
    }, 
    }); 
}); 

if (jQuery('#input_5_32').length === 1) { //Check wether the amount of options is only one 
    jQuery('#input_5_32').change(); //Trigger the change event 
}