Hi,
Thanks for the update and glad that it is working.
1 - Only the first field displays as select2 - was I supposed to modify something?
- Yes, as I mentioned in the previous reply, I only shared the instructions for a single field "tmna-site".
For all 4 fields, the custom JS code from step 4 would look like this:
jQuery(document).ready(function() {
jQuery('select[name="wpcf-tmna-site"]').toolset_select2();
jQuery('select[name="wpcf-tmna-function-or-area"]').toolset_select2();
jQuery('select[name="wpcf-tmna-location"]').toolset_select2();
jQuery('select[name="wpcf-tmna-section"]').toolset_select2();
});
2 - Is there a way make the relationships work? What I mean is, if user selects 'x' value from the first field, it should clear away 'y' values from the second, third, and fourth fields (and so on). Kind of like how filters work in a view. I'm asking because there are hundreds of values.
- I'm afraid, this will require quite complex customization, which would be beyond the scope of support that we can provide over the forum.
3 - Is there a way to set the 'default' value using select2?
- In order to pass on the "default" selected option's label and value, you can update the custom shortcode from step 1, to:
add_shortcode('get_dynamic_select_options', 'get_dynamic_select_options_fn');
function get_dynamic_select_options_fn($atts) {
$field = $atts['field'];
$default_text = $atts['default_text'];
$default_value = $atts['default_value'];
$data = do_shortcode('[wpv-control-postmeta type="select" field="'.$field.'" url_param="wpv-'.$field.'"]');
$data_arr = explode('value="', $data);
if(sizeof($data_arr) >= 2)
{
for ($i=1; $i < sizeof($data_arr) ; $i++) {
$temp_arr = explode('">', $data_arr[$i]);
if(!empty($temp_arr[1])) {
$final_data[] = $temp_arr[0];
}
}
if(!empty($final_data))
{
ob_start();
echo '<select class="form-control wpt-form-select form-select select" output="bootstrap" preset_value="" urlparam="" preview="" previewsize="" select_label="" edit_label="" value_escape="" make_readonly="" placeholder="" select_text="" data-wpt-type="select" name="'.$field.'">';
echo '<option value="'.$default_value.'" selected="selected">'.$default_text.'</option>';
foreach ($final_data as $final_data_item) {
echo '<option value="'.$final_data_item.'" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-name="'.$field.'">'.$final_data_item.'</option>';
}
echo '</select>';
return ob_get_clean();
}
}
}
The updated usage of this shortcode with its new attributes ( step 2 in the previous reply ), would look like this:
[get_dynamic_select_options field="wpcf-tmna-site" default_text="--select--" default_value=""]
Feel free to adjust the values for the attributes "default_text" & "default_value", as needed.
4 - Can I reuse this same function on other forms for the same four fields?
- Yes, the custom shortcode from step 1 would just need to be included once and it can be re-used in other forms too.
Of course, you'll need to include the custom CSS and JS code from the other steps, in each form.
5. Also - when I save (in an edit form) how can I get the select field) to keep showing the selected value?
- In case of an edit form, the custom JS code shared in question 1 of this message would need to be slightly modified, so that it can get the value from the respective input field (hidden) and then select the matching option, before initializing the select2 script:
jQuery(document).ready(function() {
var wpcftmnasite = jQuery('input[type="text"][name="wpcf-tmna-site"]').val();
jQuery('option:selected', 'select[name="wpcf-tmna-site"]').removeAttr('selected');
jQuery('select[name="wpcf-tmna-site').find('option[value="'+wpcftmnasite+'"]').attr("selected",true);
jQuery('select[name="wpcf-tmna-site"]').toolset_select2();
var wpcftmnafunctionorarea = jQuery('input[type="text"][name="wpcf-tmna-function-or-area"]').val();
jQuery('option:selected', 'select[name="wpcf-tmna-function-or-area"]').removeAttr('selected');
jQuery('select[name="wpcf-tmna-function-or-area').find('option[value="'+wpcftmnafunctionorarea+'"]').attr("selected",true);
jQuery('select[name="wpcf-tmna-function-or-area"]').toolset_select2();
var wpcftmnalocation = jQuery('input[type="text"][name="wpcf-tmna-location"]').val();
jQuery('option:selected', 'select[name="wpcf-tmna-location"]').removeAttr('selected');
jQuery('select[name="wpcf-tmna-location').find('option[value="'+wpcftmnalocation+'"]').attr("selected",true);
jQuery('select[name="wpcf-tmna-location"]').toolset_select2();
var wpcftmnasection = jQuery('input[type="text"][name="wpcf-tmna-section"]').val();
jQuery('option:selected', 'select[name="wpcf-tmna-section"]').removeAttr('selected');
jQuery('select[name="wpcf-tmna-section').find('option[value="'+wpcftmnasection+'"]').attr("selected",true);
jQuery('select[name="wpcf-tmna-section"]').toolset_select2();
});
regards,
Waqar
