jQuery can't show/hide element based on select option

Question

I am building a wordpress widget that allows users to build a simple form in the customizer preview.

Part of my form builder is to have a dropdown select input with several form elements listed (text, textarea, select, checkbox...etc), if the user selects either select , checkbox or radio as a form element, then a div containing a textarea where the user can list the options for these elements is shown via jQuery.

Obviously, the user can add unlimited elements, so I dynamically assign an id to each dropdown and each container div for the options so that I can show/hide them for each element that is added by the user.

Here is my simplified html markup showing the essence of what I have. You will see the dropdown where user can select the form element, and also the div containing a text area. Because each dropdown relates to a textarea, I have added jQuery code above them both to show/hide the textarea container:

<script>
  jQuery(document).ready(function($) {
    var arr = ['select', 'checkbox', 'radio'];
    var thisForm = '#select-input-118 select.input_type';

    function showHideSelect() {
      var val = $(thisForm + ' option:selected').val();
      var selectOptions = $('#select-options-118')

      if (arr.indexOf(val) >= 0) {
        selectOptions.show();
      } else {
        selectOptions.hide();
      }
    }

    jQuery(document).ready(function($) {
      showHideSelect();

      $(thisForm).change(function() {
        showHideSelect();
      });
    });

  });

</script>
<p id="form_builder_input_type select-input-118" class="layers-form-item layers-column layers-span-9">
  <label for="widget-layers-widget-form_builder-3-input_type">Input Type</label>
  <select size="1" id="widget-layers-widget-form_builder-3-form_builders-118-input_type" name="widget-layers-widget-form_builder[3][form_builders][118][input_type]" placeholder="Select a form item" class="input_type">
    <option value="">Select a form item</option>
    <option value="text" selected="selected">
      Text </option>
    <option value="email">
      Email </option>
    <option value="textarea">
      Text Area </option>
    <option value="select">
      Drop Down Menu </option>
    <option value="checkbox">
      Checkbox </option>
    <option value="radio">
      Radio Buttons </option>
  </select>
</p>

<div id="select-options-118">
  <p id="select_options" class="layers-form-item">
    <label for="widget-layers-widget-form_builder-3-form_builders-118-select_options">Select Options</label>
  </p>
  <p style="background:#f5f5f5; padding:10px 20px; margin-bottom:20px;">One option per line</p>
  <textarea id="widget-layers-widget-form_builder-3-form_builders-118-select_options" name="widget-layers-widget-form_builder[3][form_builders][118][select_options]" placeholder="Add your options here" class="layers-text"></textarea>
  <p></p>
</div>

As the user can create unlimited number of form elements, the id's are dynamically inserted to the elements and into the jQuery code via php - I have just taken a snippet from the outputted html here. You can see a jsfiddle also here

The idea here being that for each dropdown, if the user selects either "select", "checkbox", or "radio". The div containing the options textarea shows, in all other cases it hides.

I have 2 questions: 1) My jQuery code isn't working and I can't see why 2) Is there a better way for me to code this, rather than have a snippet of jquery for every instance of dropdown/textarea? ie can I write a global piece of jQuery code that will add this function to all instances?

Answer 1

The problem is your change event is on the form, not the element. If you set thisform to '#widget-layers-widget-form_builder-3-form_builders-118-input_type' , it works.

See https://jsfiddle.net/tghw/46stb05y/3/