Javascript jQuery无法基于选择选项显示/隐藏元素

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

我的表单生成器的一部分是有一个下拉选择输入，其中列出了几个表单元素text、textarea、select、checkbox…等等，如果用户选择select、checkbox或radio作为表单元素，那么将通过jQuery显示一个包含textarea的div，用户可以在其中列出这些元素的选项

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

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

<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中提取了一个片段

这里的想法是，对于每个下拉列表，如果用户选择select、checkbox或radio。包含选项textarea的div显示，在所有其他情况下都隐藏

我有两个问题： 1我的jQuery代码不起作用，我看不出原因

---

2对于我来说，有没有更好的方法来编写此代码，而不是为dropdown/textarea的每个实例都提供一段jquery代码？i、 e.我是否可以编写一段全局jQuery代码，将此函数添加到所有实例中？

问题在于您的更改事件在表单上，而不是元素上。如果您将此表单设置为“widget-layers-widget-form\u builder-3-form\u builders-118-input\u type”，则它可以工作

---

请参阅JSFIDLE上的jQuery是否在.ready处理程序中显示了.ready？.ready内的.ready处理程序不应为空called@guest271314这是多余的，但也是有害的@guest271314-我已经在我的小提琴上放大了脚本：但仍然不能解决问题issue@SamSkirrow另外请注意，jQuery并没有加载到JSFIDLLES的文档中；html中没有显示id为select-input-118的元素？表单\u生成器\u输入\u类型select-input-118似乎不是有效的idTry。请重新检查元素、jQuery选择器的ID