jQuery не может показать/скрыть элемент на основе опции выбора

Question

Я создаю виджет Wordpress, который позволяет пользователям создавать простую форму в предварительном просмотре customizer.

Часть моей формы строитель должен иметь раскрывающийся выбирать вход с несколькими форменных элементов, перечисленных (текст, TEXTAREA, выберите, флажок ... и т.д.), если пользователь выбирает либо select, checkbox или radio в качестве элемента формы, то через jQuery отображается div, содержащий текстовое поле, в котором пользователь может указать параметры для этих элементов.

Очевидно, пользователь может добавлять неограниченные элементы, поэтому я динамически присваиваю идентификатор каждому раскрывающемуся списку и каждому контейнеру div для параметров, чтобы я мог показать/скрыть их для каждого элемента, который добавлен пользователем.

Вот моя упрощенная наметка 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> 

Как пользователь может создавать неограниченное количество форменных элементов, то идентификаторы динамически вставлены элементы и в код jQuery через php - я только что взял фрагмент из выводимого html здесь. You can see a jsfiddle also here

Идея здесь заключается в том, что для каждого выпадающего списка, если пользователь выбирает либо «выбрать», «флажок», либо «радио». Div, содержащий опцию textarea, показывает, во всех остальных случаях он скрывается.

У меня 2 вопроса: 1) Мой JQuery код не работает, и я не могу понять, почему 2) Есть ли лучший способ для меня, чтобы закодировать это, а не иметь фрагмент JQuery для каждого экземпляра выпадающего меню/textarea? то есть я могу написать глобальную часть кода jQuery, которая добавит эту функцию ко всем экземплярам?

Answer 1

Проблема заключается в том, что ваше событие изменения находится на форме, а не на элементе. Если вы установили thisform в '#widget-layers-widget-form_builder-3-form_builders-118-input_type', он работает.

См https://jsfiddle.net/tghw/46stb05y/3/