Showing or hiding additional form fields, depend from selected option in selectbox.

If you need to show or hide some form fields in the booking form, depend from the selected option in some selectbox, you can make it with JavaScript customization.

For example, if you need to show additional fields for entering "First and Last Names" of the each visitor, depend from the selected number of this visitors, then you can have this customization in your booking form at the Booking > Settings > Fields page:

<p>Adults:  [select visitors class:visitors_selection "1" "2" "3" "4"] </p>
<p>First Name (required):<br />[text* name] </p>
<p>Last Name (required):<br />[text* secondname] </p>
<p>Email (required):<br />[email* email] </p>
<div class="visitors_selection_div v_num2 v_num3 v_num4" style="display:none;">
   <p>First Name of 2nd visitor:<br />[text* name_2nd] </p>
   <p>Last Name of 2nd visitor:<br />[text* secondname_2nd] </p>
</div>
<div class="visitors_selection_div v_num3 v_num4" style="display:none;">
   <p>First Name of 3rd visitor:<br />[text* name_3rd] </p>
   <p>Last Name of 3rd visitor:<br />[text* secondname_3rd] </p>
</div>
<div class="visitors_selection_div v_num4" style="display:none;">
   <p>First Name of 4th visitor:<br />[text* name_4th] </p>
   <p>Last Name of 4th visitor:<br />[text* secondname_4th]</p>
</div>
<script type="text/javascript">
   jQuery('.visitors_selection').on('change', function() {
       var visitors_num = jQuery(this).find(":selected").val();
       jQuery('.visitors_selection_div').hide();
       jQuery('.visitors_selection_div.v_num' + visitors_num ).show();
   });
</script>

Description of this code:
We are having 3 additional DIV elemtns, where exist fields shortcodes for entering First and Last names of visitors. All these DIV elements does not visible for the visitors

style="display:none;"
.

We attach JavaScript function for selection of the visitors number:

jQuery('.visitors_selection').on('change', function() {

Then we get the number of selected visitors:
var visitors_num = jQuery(this).find(":selected").val();

Hide by default all our additional DIV elements:
jQuery('.visitors_selection_div').hide();

And show DIV elements, that fit to our number of selected visitors:
jQuery('.visitors_selection_div.v_num' + visitors_num ).show();

The trick here in how we apply CSS CLASSes to the DIV elements structure.