Perhaps you could use some jQuery and admin-ajax to do the trick. You would also need to use one of the WooCommerce checkout field filters to add the university select field to the checkout form.
If you’re feeling adventurous, you could add a custom end point and use the WP REST API instead of admin-ajax
.
I think something along these lines should work. This code is untested, so please modify it to match your needs and setup.
Ajax PHP
function get_select_options() {
if ( empty( $_POST['type'] ) || empty( $_POST['selected'] ) ) {
wp_send_json_error();
}
if ( 'state' === $_POST['type'] ) {
$options_type="city";
} else if ( 'city' === $_POST['type'] ) {
$options_type="university";
} else {
$options_type="";
}
if ( ! $options_type ) {
wp_send_json_error();
}
// Do your DB query to get options as an array with value => title pairs
$options = querySelectOptionsByType( $options_type );
if ( ! $options ) {
wp_send_json_error();
}
wp_send_json_success( array(
'type' => $options_type,
'options' => $options
) );
}
add_action( 'wp_ajax_get_select_options', 'get_select_options' );
add_action( 'wp_ajax_nopriv_get_select_options', 'get_select_options' );
If you have custom tables in your WP database for the select options, you should be able to access them with $wpdb also.
jQuery,
jQuery(document).ready(function($) {
$('.conditional-select').on('change',function(event){
if ( 'state' === this.name ) {
$('select[name="city"]').empty().hide();
$('select[name="university"]').empty().hide();
} else if ( 'city' === this.name ) {
$('select[name="university"]').empty().hide();
} else {
return;
}
getSelectOptions( this.name, this.value );
});
function getSelectOptions( currentSelect, selectedOption ) {
var data = {
'action': 'get_select_options',
'type': currentSelect,
'selected': selectedOption
};
$.post( ajaxurl, data, function(response) {
if ( response.success ) {
var select = $('select[name="' + response.data.type + '"]');
addOptionsToSelect( response.data.options, select );
$(select).show();
}
});
}
function addOptionsToSelect( options, select ) {
$(select).empty();
var optionsHtml="";
$.each(options,function(i,option){
optionsHtml += getOptionString( option.value, option.title );
});
$(select).append(optionsHtml);
}
function getOptionString( value, title ) {
return '<option value="' + value + '">' + title + '</option>';
}
});