jQuery不能基于选择选项显示/隐藏元素

我正在构建一个wordpress小部件，允许用户在定制器预览中构建一个简单的表单。

我的表单构建器的一部分是有一个下拉选择输入，其中列出了几个表单元素（文本、文本区域、选择、复选框......等），如果用户选择 select 、 checkbox 或 radio 作为表单元素，则通过 jQuery 显示一个包含文本区域的div，用户可以在其中列出这些元素的选项。

显然，用户可以添加无限的元素，因此我为每个下拉列表和每个容器div 动态分配一个 id 作为选项，以便我可以为用户添加的每个元素显示/隐藏它们。

这是我简化的 html 标记，显示了我所拥有的本质。您将看到用户可以在其中选择表单元素的下拉列表，以及包含文本区域的div。由于每个下拉列表都与文本区域相关，因此我在它们上方添加了jQuery代码以显示/隐藏文本区域容器：

<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>

由于用户可以创建无限数量的表单元素，因此id通过php动态插入到元素和jQuery代码中 - 我刚刚从此处输出的html中获取了一个片段。你也可以在这里看到一个jsfiddle

这里的想法是，对于每个下拉列表，如果用户选择"选择"，"复选框"或"单选"。包含选项文本区域的div 显示，在所有其他情况下，它都会隐藏。

我有两个问题：1）我的jQuery代码不起作用，我看不出为什么2）有没有更好的方法来编写它，而不是为每个下拉列表/文本区域实例都有一个jquery片段？即我可以编写一段全局的 jQuery 代码来将此函数添加到所有实例中吗？